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 相关文章推荐
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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正则走开
2008/03/15 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
javascript回到顶部特效
2016/07/30 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
python正则表达式re模块详解
2014/06/25 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
新闻系毕业生推荐信
2013/11/16 职场文书
新三好学生主要事迹
2014/01/23 职场文书
建议书怎么写
2014/03/12 职场文书
公司开业庆典主持词
2014/03/21 职场文书
工作说明书格式
2014/07/29 职场文书
军事博物馆观后感
2015/06/05 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
Redis实现一个账号只能登录一个设备
2022/04/19 Redis