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 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
javascript 进度条 实现代码
Jul 30 Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
jquery移动节点实例
2015/01/14 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
Farnell德国:电子元器件供应商
2018/07/10 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
《小鹰学飞》教学反思
2014/04/23 职场文书
医德医风自我评价
2014/09/19 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
管辖权异议上诉状
2015/05/23 职场文书
运动会通讯稿200字
2015/07/20 职场文书
提档介绍信范文
2015/10/22 职场文书