面试题：一个ul中有一千个li，如何给这一千个li绑定一个鼠标点击事件，当鼠标点击时alert出这个li的内容和li的位置坐标xy。

看到这个题目，我们一般首先想到的思路是，for循环，遍历1000次。这样的话1000次的循环，效率很低，如何提高。

可以考虑利用事件冒泡特性提高效率。主要是利用事件代理。

事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。

为什么要这么做？众所周知，DOM操作是十分消耗性能的，所以重复的事件绑定简直是性能杀手。而事件代理的核心思想，就是通过尽量少的绑定，去监听尽量多的事件。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>hehe</title>

</head>

<body>

<div>

<ul id="ulItem">

<li id="li1">1</li>

<li id="li2">2</li>

<li id="li3">3</li>

<li id="li4">4</li>

<li id="li5">5</li>

<li id="li6">6</li>

<li id="li7">7</li>

<li id="li8">8</li>

<li id="li9">9</li>

<li id="li10">10</li>

<li id="li11">11</li>

...

<li id="li1000">1000</li>

</ul>

</div>

<script type="text/javascript">

var ulItem = document.getElementById("ulItem");

ulItem.onclick = function(e){

e = e || window.event;//这一行及下一行是为兼容IE8及以下版本

var target = e.target || e.srcElement;

if(target.tagName.toLowerCase() === "li"){

alert(target.innerHTML);

alert("位置为："+getElementPosition(target).x+","+getElementPosition(target).y);

}

}

function getElementPosition(e){

var x=0,y=0;

while(e != null){

x += e.offsetLeft;

y += e.offsetTop;

e = e.offsetParent;

}

return {x:x, y:y};

}

</script>

</body>

</html>

关于JavaScript中的事件代理（例子：ul中无数的li上添加点击事件）的更多相关文章

  1. 如何在UILable上添加点击事件？

    最近开始学习iOS开发,今天上来写第一个iOS笔记 昨天碰到一个需求,在UILable上添加点击事件,网上找了写资料,有人建议用透明的UIButton覆盖,有人建议写一个集成自UILable的类,扩展 ...

  2. vue router-link 上添加点击事件

    在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...

  3. openlayers上添加点击事件

    有很多场景会有这个需求,就是我绘制了图标,点击图标需要展示一些对应的信息 openlayer的事件主要是通过监听来完成的,你所有的icon的点击事件都是可以通过监听map的点击事件来处理对应的逻辑的 ...

  4. 为所有的Ul下的li标签添加点击事件

  5. iOS开发小技巧 - label中的文字添加点击事件

    Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...

  6. ECharts问题--散点图中对散点添加点击事件

    1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...

  7. [Swift通天遁地]一、超级工具-(1)动态标签：给UILabel文字中的Flag和url添加点击事件

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

  9. 使用for循环添加点击事件时，获取i值的方法

    比如页面上有一个ul,数个li,现在给li添加点击事件. var li = document.getElementsByTagName("li"); for(var i = 0; ...

随机推荐

  1. Webpack, 现在最流行的模块打包工具.压缩打包

    压缩bundle.js 1.把我们项目的代码从es6 -> es5 [babel] 参考:http://babeljs.io/docs/setup/#installation 1.1.安装包 b ...

  2. Windows Server 2016 安装Docker

    使用Windows自带的Hyper-V 而不是安装Docker Enterprise. 废话不多说,撸起袖子开干 管理员权限打开PowerShell (因为server版本默认是cmd不是ps,所以需 ...

  3. B. Filya and Homework

    http://codeforces.com/contest/714/problem/B 给定一个序列,对于每一个元素,只能 + 或者 - 一个数val.这个数一旦选定,就不能改. 问能否变成全部数字都 ...

  4. Python package和folder

    在Python项目里面的区分,按照如下规定进行: 1.严格区分包和文件夹.包的定义就是包含__init__.py的文件夹. 如果没有__init__.py,那么就是普通的文件夹. 2.导入packag ...

  5. Python 魔术方法及调用方式

    魔术方法 调用方式 解释 __new__(cls [,...]) instance = MyClass(arg1, arg2) __new__ 在创建实例的时候被调用 __init__(self [, ...

  6. pat1098. Insertion or Heap Sort (25)

    1098. Insertion or Heap Sort (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yu ...

  7. android 开发-数据存储之文件存储

    android的文件存储是通过android的文件系统对数据进行临时的保存操作,并不是持久化数据,例如网络上下载某些图片.音频.视频文件等.如缓存文件将会在清理应用缓存的时候被清除,或者是应用卸载的时 ...

  8. socket网络套节字---聊天室

    一:服务端: 1.创建客户端: package com.ywh.serversocket; import java.io.InputStream; import java.io.OutputStrea ...

  9. Google Authenticator加强ssh安全

    一.安装依赖包 软件包可以在这个地址下载:https://pan.baidu.com/s/1r0CmwbtCfNiBqU9rh_TxtA yum -y install pam-devel tar jx ...

  10. jQuery_1_基础核心

    jQuery代码风格:在jQuery程序中,不管是页面元素的选择还是内置的功能函数,都是以“$"来起始的. $(function(){});                        / ...