深入理解事件捕获与冒泡（详细版）

什么是事件机制？

在前端开发中，事件机制是 JavaScript 与用户交互的核心。当用户点击按钮、滚动页面或按下键盘时，浏览器会创建事件对象，并通过一套复杂的流程确定哪些元素应该响应这些事件。这套流程就是事件机制，它主要包含两个关键阶段：事件捕获和事件冒泡。

事件绑定的演进

DOM0 级事件

早期的 HTML 允许直接在内联属性中定义事件处理：

ini 复制代码

<button onclick="handleClick()">点击我</button>

这种方式虽然简单，但将 JavaScript 与 HTML 混合，不利于维护。

DOM2 级事件

现代 JavaScript 使用 addEventListener 方法注册事件处理器：

arduino 复制代码

element.addEventListener('click', handler, useCapture);

这里的第三个参数 useCapture 决定了事件处理器在捕获阶段还是冒泡阶段触发。

事件流：捕获与冒泡

当事件发生时，它会经历三个阶段的传播过程：

捕获阶段：从 window 对象向下传播到目标元素
目标阶段：到达事件目标元素
冒泡阶段：从目标元素向上传播回 window 对象

捕获阶段 (Capturing Phase)

事件从最外层的祖先元素（window）开始，逐级向下直到目标元素的父级。在这个阶段，使用 addEventListener 注册且第三个参数为 true 的事件监听器会被触发。

目标阶段 (Target Phase)

事件到达目标元素本身。注册在目标元素上的事件监听器会被触发，无论它们在捕获还是冒泡阶段注册。

冒泡阶段 (Bubbling Phase)

事件从目标元素开始，逐级向上回溯到 window 对象。在这个阶段，使用 addEventListener 注册且第三个参数为 false（默认值）的事件监听器会被触发。

代码示例

xml 复制代码

<div id="grandparent">
  <div id="parent">
    <div id="child">点击我</div>
  </div>
</div>

<script>
  const elements = ['grandparent', 'parent', 'child'];
  
  // 为所有元素注册捕获和冒泡阶段的事件监听器
  elements.forEach(id => {
    const element = document.getElementById(id);
    
    // 捕获阶段（第三个参数为true）
    element.addEventListener('click', () => {
      console.log(`捕获: ${id}`);
    }, true);
    
    // 冒泡阶段（第三个参数为false或省略）
    element.addEventListener('click', () => {
      console.log(`冒泡: ${id}`);
    }, false);
  });
</script>

当点击 "child" 元素时，控制台输出将是：

makefile 复制代码

捕获: grandparent
捕获: parent
捕获: child
冒泡: child
冒泡: parent
冒泡: grandparent

事件对象的重要属性

在事件处理函数中，事件对象提供了几个重要属性：

event.target：最初触发事件的元素（事件起源）
event.currentTarget：当前正在处理事件的元素（与 this 相同）
event.eventPhase：指示当前所处阶段（1-捕获，2-目标，3-冒泡）

阻止事件传播

有时我们需要控制事件的传播：

csharp 复制代码

element.addEventListener('click', (event) => {
  event.stopPropagation(); // 阻止事件进一步传播
  event.stopImmediatePropagation(); // 阻止事件传播并阻止同元素上其他处理器的执行
});

事件委托的应用

利用事件冒泡机制，我们可以实现事件委托（Event Delegation）：

javascript 复制代码

// 而不是为每个列表项单独添加事件监听器
document.getElementById('list').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('点击了列表项:', event.target.textContent);
  }
});

事件委托的优点：

减少内存使用（更少的事件监听器）
动态添加的元素无需单独绑定事件
代码更简洁易维护

实际应用建议

大多数情况下使用冒泡阶段（默认行为），因为它更符合直觉且兼容性更好
需要提前拦截事件时使用捕获阶段，例如在页面级别阻止某些操作
谨慎使用事件传播阻止，除非确实需要，因为它可能会影响其他监听器
优先使用事件委托处理动态内容或大量相似元素

与 React 事件机制的区别

需要注意的是，React 实现了自己的合成事件系统（Synthetic Event），它是对原生 DOM 事件的跨浏览器包装。虽然合成事件的行为与原生事件相似，但有一些重要区别：

React 事件使用事件委托，几乎所有事件都委托到 document 对象（v17+ 改为委托到 root 组件）
事件处理函数自动绑定到组件实例
事件对象是跨浏览器兼容的包装器