当前位置：首页 > news >正文

关于事件捕获和事件冒泡的理解

news 来源：原创 2025/5/26 10:26:31

我一直对事件捕获和事件冒泡是挺困惑的，好像理解了，但又感觉哪里不对。这篇文章打算深入探讨一些细节性的问题，更好的理解事件捕获和事件冒泡。

当我们点击的时候，浏览器的默认行为是怎么样的？

搞清楚这个非常的重要。因为历史原因，不同的浏览器以及不同版本DOM标准的不同。对于事件的处理方式也是不同的。我们不考虑历史原因，就考虑现在的开发环境，浏览器对于事件处理的默认行为是怎么样的？

我可以给出结论：主流浏览器对于事件处理都必然经过三个阶段，捕获阶段–>目标阶段–>冒泡阶段。

在一些书籍里面会提到事件捕获或者事件冒泡这样的词语。给人的感觉好像只有捕获阶段或者只有冒泡阶段的样子。实际上，任何的点击事件都必然经历三个完整的阶段，只是一些阶段的事件可以通过参数配置屏蔽掉。怎么屏蔽那是js引擎的事情，跟我们没有关系。

从addEventListener说起

在明白了浏览器对于事件流的默认行为后，我们才能开始下面的内容。或者你先记住默认行为的结论。

主流浏览器对于事件处理都必然经过三个阶段，捕获阶段–>目标阶段–>冒泡阶段。

默认行为，事件冒泡

我们以一个简单的例子开始。在js中，addEventListener就是事件流的一个具体实现。

addEventListener的第三个参数叫useCapture,也就是是否使用事件捕获，默认是false,所以默认情况下，使用的是事件冒泡。 注意这句话，这句话在很多书籍和文章中经常出现，给人一种错觉，就是好像只有冒泡阶段。实际上真正的意思是只处理事件冒泡，不处理事件捕获。也就是说，三个阶段都是存在的。只是事件捕获被屏蔽了不处理而已。

例1：父子元素的点击事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#outer {width: 200px;height: 200px;background: lightblue;}#inner {width: 100px;height: 100px;background: lightcoral;}</style></head><body><div id="outer"><div id="inner">点击</div></div><script>document.getElementById("outer").addEventListener("click",function () {console.log("outer...");},false);document.getElementById("inner").addEventListener("click",function () {console.log("inner...");},false);</script></body>
</html>

在这里插入图片描述
在开始分析代码之前，我打算解释一下目标阶段。

目标阶段

这个阶段好像看起来没什么用，实际上目标阶段非常的重要。
如果我们点击蓝色区域，也就是不包含inner的outer区域。这时候只会输出outer。可能有人会奇怪，如果三个阶段都是必须经历的话，不管是冒泡和捕获，从DOM的元素结构上，只要事件被处理，必定会传到inner上。但事实是，你点击蓝色区域的时候，你的目标阶段就只要outer这个元素。根本没有inner元素什么事情。这就是目标阶段的具体含义。 也是目标阶段这个抽象概念在浏览器中的实际体现。
在这里插入图片描述

冒泡阶段

例1的结果如下：

inner...
outer...

我们分析一下，为什么是这样的输出结果。首先，父子元素的addEventListener的第三个参数都是false，也就是都屏蔽捕获阶段，处理冒泡阶段。我们只需要分析输出的结果在逻辑上是否合理就行了。这里我们可以简单的判断父子元素的输出先后问题。

首先，必然都经过三个阶段：捕获阶段–>目标阶段–>冒泡阶段。
因为父子元素都是屏蔽捕获阶段，只使用冒泡阶段。所以从里到外的时候inner优先于outer输出。这是符合逻辑的。

捕获阶段

如果我们把父子元素的addEventListener的第三个参数都设为true。那么输出的结果如下：

outer...
inner...

首先，必然都经过三个阶段：捕获阶段–>目标阶段–>冒泡阶段。
因为父子元素都是屏蔽冒泡阶段，只使用捕获阶段。所以从外到里的时候outer优先于inner输出。这是符合逻辑的。

同时使用捕获阶段和冒泡阶段

我们给outer选择器同时添加两个addEventListener，并且useCapture一个设置为true,一个设置为false。这就是所谓的同时使用捕获阶段和冒泡阶段。inner的addEventListener只是陪跑，不需要也可以说明问题。

      //同时的意思是你需要对同一个元素添加两个addEventListener，一个useCapture为false,一个为truedocument.getElementById("outer").addEventListener("click",function (event) {console.log("outer...", event.eventPhase);},true);document.getElementById("outer").addEventListener("click",function (event) {console.log("outer...", event.eventPhase);},false);document.getElementById("inner").addEventListener("click",function (event) {console.log("inner...", event.eventPhase);},false);

输出结果如下：

outer...
inner...
outer...

很容易解释这个输出结果。

首先，必然都经过三个阶段：捕获阶段–>目标阶段–>冒泡阶段。因为有一个outer选择器的addEventListener监听了捕获阶段，所以在捕获阶段的时候，outer先输出一次，而inner在目标阶段被输出，接着在冒泡阶段，事件从里到外传播，outer再一次被输出。

如果不是很理解的话，有一个属性可能帮我们更直观的理解这个过程。

通过eventPhase判断当前事件所处阶段

还是上面这个例子，只是这次，我们加了event.eventPhase这个输出。

      document.getElementById("outer").addEventListener("click",function (event) {console.log("outer...", event.eventPhase);},true);document.getElementById("outer").addEventListener("click",function (event) {console.log("outer...", event.eventPhase);},false);document.getElementById("inner").addEventListener("click",function (event) {console.log("inner...", event.eventPhase);},false);

这个输出有三个值，值为数字。event上有三个常量分别对应这三个数字。

1：CAPTURING_PHASE
2：AT_TARGET
3：BUBBLING_PHASE

这个例子的输出结果如下：分别对应捕获，目标，冒泡三个阶段。

outer...1
inner...2
outer...3

这个例子非常的完美，非常能说明问题。两个outer分别对应捕获和冒泡，这个非常的好理解。inner为什么是在目标阶段输出的？因为设计如此，这也是目标阶段的概念所在。最里层的元素的事件触发时机就是在目标阶段。

阻止事件冒泡

我们看下面的代码，在inner回调函数中调用stopPropagation这个函数，Propagation是传播的意思，也就是这个函数能阻止事件传播。

      document.getElementById("outer").addEventListener("click",function () {console.log("outer...");},false);document.getElementById("inner").addEventListener("click",function (event) {console.log("inner...");event.stopPropagation();},false);

结果如下：

inner...

outer没有输出内容，这非常好理解，因为调用stopPropagation，事件到底目标元素的时候停止传播了。但为什么inner能输出呢？这是因为inner的回调函数是在目标阶段调用的，而不是在冒泡阶段，可以参考上一小节的例子。

阻止目标阶段和事件冒泡

更进一步，我们可以把目标阶段和冒泡阶段都给阻止。下面的代码就可以实现这样的功能。

      document.getElementById("outer").addEventListener("click",function () {console.log("outer...");event.stopPropagation();},true);document.getElementById("inner").addEventListener("click",function (event) {console.log("inner...");},false);

输出结果如下：

outer...

为什么只要outer被输出？因为在捕获阶段完成后调用了stopPropagation方法，那么后面的目标阶段和冒泡阶段事件也就不会再传递了，所以inner所在的目标阶段自然不会输出内容。

到此，最难的部分已经全部介绍完毕。

阻止默认行为

这个非常的简单，就是preventDefault函数的使用场景。这个函数能够阻止元素的默认行为。例如a链接在设置了href后，在点击的时候自带跳转效果，调用preventDefault函数后，这个效果就没有了，你可以在preventDefault函数实现你自己想要的行为。

<body><div id="outer"><a href="www.baidu.com" id="inner">点击跳转</div></div><script>document.getElementById("inner").addEventListener("click",function (event) {console.log("inner...");event.preventDefault();},false);</script>
</body>

事件委托

这种情况是非常常见的，只是我们可能对这个概念名词比较陌生。
例如下面的list,里面有多个item。
我们有两种方式实现对于item的点击监听。一种是通过for循环给每个item都addEventListener，是能实现效果的，但问题非常明显，生成太多的监听严重的消耗性能。

另一种方式就是所谓的事件委托。也就是把addEventListener放在list上面，这样我们就能够通过一个addEventListener就能够实现对item的监听功能。

  <body><ul id="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li></ul><script>//没有事件委托的话，需要给每个item添加事件监听，这样是非常消耗资源的，性能比较低。// document.querySelectorAll(".item").forEach((item) => {//   item.addEventListener(//     "click",//     function (event) {//       console.log("item clicked");//     },//     true//   );// });document.getElementById("list").addEventListener("click",function (event) {if (event.target.tagName === "LI") {console.log("item 被点击了");}},false);</script></body>

事件委托有个缺点是没有索引，你可以通过父元素遍历定位拿到索引。或者，在生成元素的时候就自己添加一个索引属性。