JavaScript事件委托的技术原理探讨示例
更新时间：2014年04月17日 15:25:50 作者：
使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上
如今的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事件委托的幕后原理，希望你也感受到了事件委托的强大用处！
相关文章
这篇文章主要介绍了如何用JavaScipt测网速，对测网速感兴趣的同学，可以参考下2021-05-05
js自动生成的元素与页面原有元素发生堆叠通过去除浮动，给原有元素（商品扩展信息部分）加上clear:both; 果然正常了2013-10-10
本文主要介绍了JS仿JQuery选择器功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要分析了js实现跨域的4种实用方法原理，主要是使用jsonp跨域，使用window.name来进行跨域，对这方面感兴趣的朋友可以参考一下2015-10-10
JavaScript实现带有子菜单和控件的slider轮播图效果
本文通过实例代码给大家介绍了基于js实现带有子菜单和控件的slider轮播图效果，本文附有图片和示例代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-11-11
这篇文章主要介绍了Javascript URI 解析介绍,本文直接给出代码示例,需要的朋友可以参考下2015-03-03
这篇文章主要为大家详细介绍了JS实现图片上下切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
摘自《JavaScript: The Good Parts》，作为读书笔记备用。对于追求执行效率的朋友可以参考下。2010-03-03
JavaScript 装饰器是一种特殊的功能，允许在不修改源代码的情况下动态修改类和函数的行为，本文将介绍五个让你眼前一亮的装饰器技巧，包括装饰函数参数、装饰类属性、装饰函数返回值和装饰函数调用,需要的朋友可以参考下2023-06-06
第一人称视角的场景巡检主要需要解决两个问题，人物在场景中的移动和碰撞检测。移动与碰撞功能是所有三维场景首先需要解决的基本问题，今天我们就通过最基本的threejs来完成第一人称视角的场景巡检功能，感兴趣的朋友一起看看吧2022-02-02
最新评论