通过JavaScript事件的冒泡来动态为元素绑定事件的方法称为事件委托(Event Delegation,也称为“事件代理”),是 JavaScript 中最热门的技术之一,在笔试和面试中是常考察的重点知识点,今天来详细介绍一下相关的原理知识。
1、事件捕获与事件冒泡
事件捕获与事件冒泡的经典原理图如下:
事件捕获
在事件捕获过程中,事件开始由不太具体的节点接收,然后逐级向下传播到最具体的节点。在这个过程中,事件相应的监听函数是不会被触发的,但是到达该目标元素节点后,会触发该元素的事件,如果没有绑定事件则不执行。
事件冒泡
在事件冒泡过程中,事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点或文档。它与事件捕获是个相反的过程。在这个过程中,如果有节点绑定了相应的事件处理函数,这些函数都会被触发。
防止事件冒泡的方法:
- event.stopPropagation(); // 阻止了事件冒泡,但不会阻击默认行为
- event.preventDefault(); // 阻止默认事件,比如a的跳转事件
2、事件委托
事件委托原理
事件委托的原理就是不给每个子节点单独设置事件监听器,而是设置在其父节点上,然后利用冒泡原理设置每个子节点。
事件委托的示例代码如下:
<!--
请补全JavaScript代码,要求如下:
1. 给"ul"标签添加点击事件
2. 当点击某"li"标签时,该标签内容拼接"."符号。如:某"li"标签被点击时,该标签内容为".."
注意:必须使用DOM0级标准事件(onclick)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<ul>
<li>.</li>
<li>.</li>
<li>.</li>
</ul>
<script type="text/javascript">
// 补全代码
document.getElementsByTagName("ul")[0].onclick = function (event) {
console.lo***击了ul");
let target = event.target;
console.log(target);
if (target) {
target.innerHTML = target.innerHTML + ".";
}
};
</script>
</body>
</html>
在上述代码没有给每个li标签绑定事件,而是通过给ul标签绑定事件,然后判断target的形式(冒泡)来设置每个子节点相应的处理。
事件委托应用
为什么要使用事件委托? 在 JavaScript 中,页面内事件处理程序的个数会直接影响页面的整体性能,因为每个事件处理程序都是对象,对象会占用内存,内存中的对象越多,页面的性能则越差。此外,事件处理程序需要与 DOM 节点进行交互,访问 DOM 的次数越多,引起浏览器重绘和重排的次数也就越多,从而影响页面的性能。而当页面中很多表格或列表需要添加事件时,如果逐个添加那就太麻烦了,但是使用事件委托就能极大的减少工作量,同时也能提高页面的性能。因此在开发中事件委托的应用是十分普遍的,大家要清楚的认识这一点。
知识补充说明:重绘是指当元素样式改变时,浏览器会根据元素的新样式重新绘制元素的外观。重排是指当 DOM 树的一部分发生变化时(例如元素尺寸改变),浏览器会重新创建 DOM 树
事件委托的优点
- 减少内存消耗和DOM操作,提高性能
- 动态绑定事件:事件绑定发生在父元素,其动态增加的子元素也能触发同样的事件
事件委托注意事项
- 事件委托的实现依靠的冒泡,因此不支持事件冒泡的事件就不适合使用事件委托。
- 不是所有的事件绑定都适合使用事件委托,不恰当使用反而可能导致不需要绑定事件的元素也被绑定上了事件。
3、不支持冒泡的事件
冒泡事件有很多,因此记住常见的不支持冒泡事件就可以了,常见的不支持冒泡的事件如下:
- focus、blur
- mouseenter、mouseleave
- load、unload、resize