JS的事件冒泡、事件捕获和事件委托

2401_84093860

于 2024-05-06 02:27:24 发布

阅读量1k

点赞数 14

分类专栏：程序员文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/2401_84093860/article/details/138479203

版权

程序员专栏收录该内容

266 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的事件冒泡和事件捕获原理，以及如何通过事件委托解决大量DOM元素的事件绑定问题。作者还分享了前端开发中常用的事件处理机制和提升效率的方法，以及提供了一份全面的学习资料链接。

摘要由CSDN通过智能技术生成

在这里插入图片描述

我们仅仅是点击了红色的box，但是绿色和紫色的box也被触发了打印事件，触犯顺序是红色>绿色>紫色，这种现象就是事件冒泡了。

我们再试试事件捕获，把上面代码里监听事件的第三个参数改为true，然后点击红色的box：

在这里插入图片描述

我们还是只点击最中间的红色box，和上一次一样，也是三个box都触发了事件，但是顺序反过来了，紫色>绿色>红色，这种现象称为事件捕获。

通过上面的例子，应该很容易就理解了事件冒泡和事件捕获，我们平时都是默认冒泡的，冒泡是一直冒到document根文档为止。

阻止冒泡的方法：

function() {

// IE里阻止冒泡

window.event.cancelBubble = true;

// IE里获取事件源的id

//var srcID = window.event.srcElement.id;

//ie阻止默认事件

//window.event.returnValue = false

}

function(event) {

// 非IE里阻止冒泡

event.stopPropagation();

// 非IE里获取事件源的id

// var srcID = event.target.id;

//非IE阻止默认事件，使用preventDefault

}

现在来谈谈事件委托，事件委托又称之为事件代理，我们通过一个通俗的例子来解释：

有三个同事预计会在周一收到快递，为了签收快递，有两种办法：1.三个人在公司门口等快递；2.委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收(可以给暂时不存在的节点也绑定上事件)。

现在有一个ul，ul里又有100个li，我想给这100个li都绑定一个点击事件，我们一般可以通过for循环来绑定，但是要是有1000个li呢？为了提高效率和速度，所以我们这时可以采用事件委托，只给ul绑定一个事件，根据事件冒泡的规则，只要你点了ul里的每一个li，都会触发ul的绑定事件，我们在ul绑定事件的函数里通过一些判断，就可以给这100li都触发点击事件了。