JavaScript事件委托的技术原理探讨示例


Posted in Javascript onApril 17, 2014

如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)'了。使用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。基本概念非常简单,但仍有很多人不理解事件委托的工作原理。这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子。

假定我们有一个UL元素,它有几个子元素:

<ul id="parent-list"> 
<li id="post-1">Item 1</li> 
<li id="post-2">Item 2</li> 
<li id="post-3">Item 3</li> 
<li id="post-4">Item 4</li> 
<li id="post-5">Item 5</li> 
<li id="post-6">Item 6</li> 
</ul>

我们还假设,当每个子元素被点击时,将会有各自不同的事件发生。你可以给每个独立的li元素添加事件监听器,但有时这些li元素可能会被删除,可能会有新增,监听它们的新增或删除事件将会是一场噩梦,尤其是当你的监听事件的代码放在应用的另一个地方时。但是,如果你将监听器安放到它们的父元素上呢?你如何能知道是那个子元素被点击了?

简单:当子元素的事件冒泡到父ul元素时,你可以检查事件对象的target属性,捕获真正被点击的节点元素的引用。下面是一段很简单的JavaScript代码,演示了事件委托的过程:

// 找到父元素,添加监听器... 
document.getElementById("parent-list").addEventListener("click",function(e) { 
// e.target是被点击的元素! 
// 如果被点击的是li元素 
if(e.target && e.target.nodeName == "LI") { 
// 找到目标,输出ID! 
console.log("List item ",e.target.id.replace("post-")," was clicked!"); 
} 
});

第一步是给父元素添加事件监听器。当有事件触发监听器时,检查事件的来源,排除非li子元素事件。如果是一个li元素,我们就找到了目标!如果不是一个li元素,事件将被忽略。这个例子非常简单,UL和li是标准的父子搭配。让我们试验一些差异比较大的元素搭配。假设我们有一个父元素div,里面有很多子元素,但我们关心的是里面的一个带有”classA” CSS类的A标记:
// 获得父元素DIV, 添加监听器... 
document.getElementById("myDiv").addEventListener("click",function(e) { 
// e.target是被点击的元素 
if(e.target && e.target.nodeName == "A") { 
// 获得CSS类名 
var classes = e.target.className.split(" "); 
// 搜索匹配! 
if(classes) { 
// For every CSS class the element has... 
for(var x = 0; x < classes.length; x++) { 
// If it has the CSS class we want... 
if(classes[x] == "classA") { 
// Bingo! 
console.log("Anchor element clicked!"); 
// Now do something here.... 
} 
} 
} 
} 
});

上面这个例子中不仅比较了标签名,而且比较了CSS类名。虽然稍微复杂了一点,但还是很具代表性的。比如,如果某个A标记里有一个span标记,则这个span将会成为target元素。这个时候,我们需要上溯DOM树结构,找到里面是否有一个 A.classA 的元素。

因为大部分程序员都会使用jQuery等工具库来处理DOM元素和事件,我建议大家都使用里面的事件委托方法,因为这里工具库里都提供了高级的委托方法和元素甄别方法。

希望这篇文章能帮助你理解JavaScript事件委托的幕后原理,希望你也感受到了事件委托的强大用处!

Javascript 相关文章推荐
Jquery操作radio的简单实例
Jan 06 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
JS实现网页时钟特效
Mar 25 Javascript
JS实现div居中示例
Apr 17 #Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 #Javascript
js调用后台、后台调用前台等方法总结
Apr 17 #Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 #Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 #Javascript
在JS中解析HTML字符串示例代码
Apr 16 #Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 #Javascript
You might like
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
Python实现端口复用实例代码
2014/07/03 Python
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
Python中如何定义一个函数
2016/09/06 面试题
年终自我鉴定
2013/10/09 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
元旦晚会感言
2014/03/12 职场文书
个人安全生产承诺书
2014/05/22 职场文书
硕士生找工作求职信
2014/07/05 职场文书
教师远程研修感悟
2015/11/18 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
VUE递归树形实现多级列表
2022/07/15 Vue.js