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 select的操作实现代码
May 06 Javascript
jQuery技巧总结
Jan 01 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
微信小程序实现左右列表联动
May 19 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
react基本安装与测试示例
Apr 27 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技术开发技巧分享
2010/03/23 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
python机器人运动范围问题的解答
2019/04/29 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
文案策划求职信
2014/04/14 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
Python实现照片卡通化
2021/12/06 Python