4、事件冒泡与捕获：理解事件传播的三个阶段，实战中如何利用

说实话，刚入行那会儿，我对事件传播的理解就是「点谁触发谁」。直到有一次，一个嵌套弹窗的关闭按钮怎么都点不中，我才意识到——事件在 DOM 树里不是直来直去的，它有自己的传播路径。

今天我们就来彻底搞懂这件事。你想想看，一个点击事件从发生到被处理，中间经历了什么？

4.1 事件传播的三个阶段

W3C 标准把事件传播分成三个阶段。这不是理论空谈，是浏览器实实在在的执行顺序。

阶段	名称	传播方向	触发时机
1	捕获阶段	从 window → 目标元素的父节点	事件到达目标之前
2	目标阶段	到达目标元素本身	事件命中目标时
3	冒泡阶段	从目标元素的父节点 → window	事件离开目标之后

我习惯把这三个阶段想象成「电梯上下楼」：捕获阶段是电梯从顶层往下走，目标阶段是到了你要去的楼层，冒泡阶段是电梯再往上回到顶层。

4.2 捕获与冒泡：谁先谁后？

这个问题我面试过很多人，能答对的不到一半。其实规则很简单：捕获先执行，冒泡后执行。但前提是——你得在捕获阶段注册监听器。

默认情况下，addEventListener 的第三个参数是 false，表示在冒泡阶段触发。改成 true 才会在捕获阶段触发。

// 冒泡阶段监听（默认）
element.addEventListener('click', handler, false);
// 或者省略第三个参数
element.addEventListener('click', handler);

// 捕获阶段监听
element.addEventListener('click', handler, true);

4.3 实战场景一：事件委托

这是冒泡机制最经典的应用。说白了就是——把子元素的事件处理交给父元素。

我曾经维护过一个动态列表，列表项有上千条。如果给每个 <li> 都绑一个点击事件，性能直接崩。后来改成在父容器上监听冒泡，用 event.target 判断具体点了谁。

// 不推荐：逐个绑定
document.querySelectorAll('.list-item').forEach(item => {
  item.addEventListener('click', handleItemClick);
});

// 推荐：事件委托
document.querySelector('.list-container').addEventListener('click', (event) => {
  const target = event.target.closest('.list-item');
  if (target) {
    handleItemClick(target);
  }
});

对比项	逐个绑定	事件委托
内存占用	高（每个元素一个函数）	低（只有一个函数）
动态元素	需要重新绑定	自动支持
代码维护	分散	集中
适用场景	少量静态元素	大量或动态元素

4.4 实战场景二：阻止传播

有时候你不想让事件继续冒泡。比如弹窗里的关闭按钮，点了之后只关弹窗，不触发弹窗背景的点击事件。

closeButton.addEventListener('click', (event) => {
  // 阻止事件继续冒泡
  event.stopPropagation();
  modal.close();
});

还有一个兄弟方法叫 stopImmediatePropagation()，它更狠——连当前元素上其他未执行的监听器也一并阻止。

// 只阻止冒泡
event.stopPropagation();

// 阻止冒泡 + 阻止当前元素其他监听器
event.stopImmediatePropagation();

4.5 实战场景三：捕获阶段的妙用

捕获阶段用得少，但用对了就是杀手锏。我举两个例子。

场景一：全局点击拦截

你想在用户点击页面任何地方之前，先执行一段逻辑。比如埋点统计、权限校验。这时候在 document 的捕获阶段监听最合适。

document.addEventListener('click', (event) => {
  // 在所有点击事件之前执行
  console.log('捕获阶段拦截到点击:', event.target);
}, true); // 注意 true

场景二：阻止特定区域的默认行为

比如一个表单区域，你想禁止所有输入框获得焦点。在捕获阶段拦截，子元素根本收不到事件。

formArea.addEventListener('focusin', (event) => {
  event.preventDefault();
  console.log('禁止聚焦');
}, true);

4.6 常见误区与避坑指南

• 误区一：以为 event.target 永远是绑定监听器的元素。其实 event.target 是最内层触发事件的元素，event.currentTarget 才是绑定监听器的元素。
• 误区二：滥用 stopPropagation()。我曾经在一个项目里看到几乎所有点击事件都调了 stopPropagation()，结果全局埋点全废了。除非明确需要，否则别拦。
• 误区三：混淆 preventDefault() 和 stopPropagation()。前者阻止默认行为（比如链接跳转），后者阻止事件传播。两码事。