关于JavaScript中的事件代理（例子：ul中无数的li上添加点击事件）
面试题：一个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上添加点击事件）的更多相关文章
- 如何在UILable上添加点击事件？
最近开始学习iOS开发,今天上来写第一个iOS笔记 昨天碰到一个需求,在UILable上添加点击事件,网上找了写资料,有人建议用透明的UIButton覆盖,有人建议写一个集成自UILable的类,扩展 ...
- vue router-link 上添加点击事件
在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...
- openlayers上添加点击事件
有很多场景会有这个需求,就是我绘制了图标,点击图标需要展示一些对应的信息 openlayer的事件主要是通过监听来完成的,你所有的icon的点击事件都是可以通过监听map的点击事件来处理对应的逻辑的 ...
- 为所有的Ul下的li标签添加点击事件
- iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...
- ECharts问题--散点图中对散点添加点击事件
1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...
- [Swift通天遁地]一、超级工具-(1)动态标签：给UILabel文字中的Flag和url添加点击事件
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
- 使用for循环添加点击事件时，获取i值的方法
比如页面上有一个ul,数个li,现在给li添加点击事件. var li = document.getElementsByTagName("li"); for(var i = 0; ...
随机推荐
- 华东交通大学2017年ACM“双基”程序设计竞赛 1001
Problem Description 最近流行吃鸡,那就直接输出一行"Winner winner ,chicken dinner!"(没有双引号)模板代码:#include &l ...
- Codeforces Round #129 (Div. 2) A
Description The Little Elephant loves Ukraine very much. Most of all he loves town Rozdol (ukr. &quo ...
- 转 用Oracle自带脚本 重建WMSYS用户的WMSYS.WM_CONCAT函数
https://blog.csdn.net/huaishuming/article/details/41726659?locationNum=1
- Hibernate 批量保存数据
public Boolean save(Collection<Object> os) { int batchSize = 50,i=0; Session session=this.sess ...
- CountDownLatch与CyclicBarrier的使用与区别
CountDownLatch的介绍和使用: 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数 初始化 CountDownLatch.由于调用了 co ...
- pat1056. Mice and Rice (25)
1056. Mice and Rice (25) 时间限制 30 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Mice and ...
- linux下的rpm软件包,rpm源码包和tar安装包
Linux下的软件包是一个独立的程序,用于Linux系统的包管理.在Linux下,软件包的安装方式很多样,不如Windows下的软件安装简单,Windows下基本上就是傻瓜式下一步下一步,而Linux ...
- CSS里的 no-repeat
简单来说,CSS里的 no-repeat是针对背景图片来说的.当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平 ...
- python全栈测试题（一）
1.执行Python脚本的两种方式 如果想要永久保存代码,就要用文件的方式 如果想要调试代码,就要用交互式的方式即终端命令下和python环境中 2.Pyhton单行注释和多行注释分别用什么? pyt ...
- jQuery中$(function(){})与（function($){})(jQuery)、$(document).ready(function(){})等的区别讲解
1.(function($){...})(jQuery); (1).原理: 这实际上是匿名函数,如下: function(arg){...} 这就定义了一个匿名函数,参数为arg:而调用函 ...