Javascript的事件捕获和事件冒泡，面试高频题目

m0_60607895

已于 2024-04-10 14:38:22 修改

阅读量409

点赞数 3

分类专栏： 2024年程序员学习文章标签： javascript 面试开发语言

于 2024-04-10 14:38:20 首次发布

本文链接：https://blog.csdn.net/m0_60607895/article/details/137596329

版权

2024年程序员学习专栏收录该内容

268 篇文章 1 订阅

订阅专栏

我们在外层div和内层div的onclick事件上都绑定了alertName(e)方法，打开浏览器试试。当我们点击外层绿色部分，外层div的事件响应了；让我们点击内层蓝色部分，内层div的事件先响应，然后外层div的事件再响应。

所以我们很容易得出结论，浏览器是先找到当前被点击的元素，如果该元素上注册了onclick事件则响应；然后浏览器继续寻找被点击元素的父元素，如果其也注册了onclick事件，则该事件也响应，然后再继续向上层寻找。这就是JS的事件冒泡机制。我们换个浏览器试试，目前版本的Chrome, Safari, Firefox和IE都是同样的结果。

事件处理模型

其实事件处理有两种模型。一种叫冒泡型，也就是上面我们看到的例子，顺序是从里到外”div” -> “body” -> “html” -> “document” -> “window”。还有一种叫捕获型，顺序正好颠倒。IE是支持冒泡型，据说历史上的Netscape是支持捕获型。那我们主流的W3C标准呢？答案是都支持，默认是冒泡型。这要怎么理解？我们先来看下W3C DOM事件流的过程：

Event Capture Process

当一个事件发生时，先进入捕获阶段，也就是从最外层开始，依次向里传播事件，一直到触发事件的目标元素（上例中的div child)。随后再进入冒泡阶段，从触发事件的元素开始，依次向外传播，直到最外层元素。那么为什么我们在前面的例子中看不到事件捕获的阶段呢？这里我们要先说另外一个概念。

添加事件绑定

上面的例子是将onclick事件属性设置为alertName(e)方法，这样的事件绑定方法一般不推荐，因为会覆盖之前所绑定的其他函数。我们建议采用addEventListener方法。我们将上例中绑定事件的代码做如下改动：

child = document.getElementById(‘child’);
parent = document.getElementById(‘parent’);
child.addEventListener(“click”, alertName); // 注意，这里要写click，不是onclick
parent.addEventListener(“click”, alertName);

addEventListener方法的第一个参数是事件名称，第二个参数是响应函数。打开浏览器点击下，是不是跟之前用onclick绑定的效果一样啊？那这么做的好处是什么呢？我们试试在上段代码的后面添加下面的代码：

function alertAgain(e) {
alert(this.id + “, again”)
}
child.addEventListener(“click”, alertAgain);

再次点击内层蓝色div部分，你会看到该元素上绑定的两个点击事件方法都响应了，响应的顺序同代码中绑定的顺序一致。所以，使用addEventListener就不会覆盖掉之前已绑定的方法。

捕获阶段事件响应

介绍完addEventListener方法的作用，就要说下，这个方法其实有第三个参数的。参数名称叫useCapture，类型是布尔型。从名称里估计大家就猜到了，如果将它设为true的话，事件处理将会是捕获型的，也就是事件将会在捕获阶段响应，而不是冒泡阶段响应。我们将上面例子中addEventListener部分改动一下：

测试一下，当点击内层蓝色部分时，外层div的alertName方法先响应了，然后是内层div的alertName方法，最后是外层div的alertAgain方法。也就是说，语句parent.addEventListener("click", alertName, true);注册的事件，被提前到捕获阶段响应，即最外层的响应会先被执行。

注意了，IE8之前是不支持addEventListener的，所以只能用attachEvent方法来添加事件绑定，代码如下：

child = document.getElementById(‘child’);
parent = document.getElementById(‘parent’);
child.attachEvent(“onclick”, alertName); // 注意，这里要写onclick
parent.attachEvent(“onclick”, alertName);

attachEvent方法没有第三个参数，所以说老版本的IE只支持事件冒泡，而不支持事件捕获。即使是在后续的IE版本中可以调用addEventListener方法，但大家也要注意，里面的”this指针”的指向跟W3C标准浏览器不一样。父元素在冒泡过程中响应时，”this指针”将指向window对象，所以上面的例子在IE高版本中测试时，第二个”alert”内容会是undefined。哎，万恶的IE！