javascript入门到进阶 - 事件冒泡和事件委托详解
程序员文章站
2022-03-08 22:55:10
...
事件冒泡
❝当一个子元素的事件被触发的时候（例如onclick事件）， 该事件会从事件（被电击的元素） 开始逐个向上传播，触发父级元素的点击事件
❞
上图吧
HTML代码
<html>
<head></head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
JAVASCRIPT代码
var oLis = document.querySelectorAll('li');
var length = oLis,length;
for(let i=0;i<length;i++){
oLis[i].onclick = function(){
alert(this.innerHTML);
}
}
如果你点击了页面中的 li 标签，那么这个click事件会按照如下 （1）li （2）ul （3）body （4）html （5）document 也就是说click事件首先在 li 元素上触发， 而这个元素就是我们点击的元素，然后点击事件沿着DOM树向上传播 在每一个节点上触发，直到传播到document对象 我自己画了一个事件冒泡的示意图如下
事件委托
❝什么是事件委托：
❞
❝事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。(不理解冒泡的可以去百度下)
❞
❝定义：利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托。使用事件委托技术可以避免对特定的每个节点添加事件监听器，相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。
❞
❝事件委托的好处：
❞
❝事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。
❞
❝使用事件委托，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，这样就大大提高了性能。
❞
❝什么时候用事件委托：
❞
❝当子元素有很多，需要对子元素的时间进行监听的时候
❞
1. var ul = document.getElementById('parentUl');
2. ul.onclick=function (event) {
3. var e = event||window.event,
4. source = e.target || e.srcElement;
5. //target表示在事件冒泡中触发事件的源元素，在IE中是srcElement
6. if(source.nodeName.toLowerCase() == "li"){
7. //判断只有li触发的才会输出内容
8. alert(source.innerHTML);
9. }
10. stopPropagation(e); //阻止继续冒泡
11. };
下一篇： javascript
推荐阅读
-
javascript 中事件冒泡和事件捕获机制的详解
-
Javascript事件的捕获方式和冒泡方式详解
-
javascript事件冒泡详解和捕获、阻止方法_javascript技巧
-
javascript 中事件冒泡和事件捕获机制的详解
-
javascript冒泡事件、鼠标事件和dom实例详解
-
javascript事件冒泡捕获和阻止事件传播示例代码详解
-
JavaScript事件对象、target和this的区别、阻止默认事件、阻止冒泡、事件委托
-
javascript事件冒泡捕获和阻止事件传播示例代码详解
-
JavaScript事件代理和委托详解_javascript技巧
-
javascript事件冒泡详解和捕获、阻止方法_javascript技巧