JavaScript 事件流：冒泡与捕获

在 JavaScript 中，事件流描述了事件在 DOM 中传播的机制，主要有两种传播方式：事件冒泡（Bubbling）和事件捕获（Capturing）。

事件冒泡（Bubbling）

事件冒泡是默认的事件传播方式，事件从最具体的元素（触发事件的元素）开始，然后向上传播到较为不具体的元素（文档根节点）。

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

<script>
document.getElementById('parent').addEventListener('click', function() {
  console.log('父元素被点击');
});

document.getElementById('child').addEventListener('click', function() {
  console.log('子元素被点击');
});
</script>

点击按钮时，控制台输出：

子元素被点击
父元素被点击

事件捕获（Capturing）

事件捕获与冒泡相反，事件从文档根节点开始，向下传播到最具体的元素。

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

<script>
document.getElementById('parent').addEventListener('click', function() {
  console.log('父元素被点击');
}, true); // 第三个参数设为 true 表示使用捕获

document.getElementById('child').addEventListener('click', function() {
  console.log('子元素被点击');
});
</script>

点击按钮时，控制台输出：

父元素被点击
子元素被点击

事件流三个阶段

完整的事件流包含三个阶段：

1. 捕获阶段：从 window 向下传播到目标元素
2. 目标阶段：事件到达目标元素
3. 冒泡阶段：从目标元素向上冒泡到 window

阻止事件传播

可以使用 event.stopPropagation() 阻止事件继续传播：

document.getElementById('child').addEventListener('click', function(event) {
  console.log('子元素被点击');
  event.stopPropagation(); // 阻止事件冒泡
});

事件委托

利用事件冒泡机制，可以将事件处理程序绑定到父元素，通过判断事件目标来管理子元素的事件：

<ul id="list">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

<script>
document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('点击了:', event.target.textContent);
  }
});
</script>

总结

• 冒泡：从内向外（默认）
• 捕获：从外向内（需要显式设置）
• 大多数情况下使用冒泡即可
• 事件委托是利用冒泡机制的实用技巧
• 可以使用 stopPropagation() 阻止事件传播

理解事件冒泡和捕获机制对于处理复杂的事件交互非常重要。