JavaScript事件冒泡与捕获在嵌套元素上的事件分发顺序

理解事件流是掌握JavaScript交互逻辑的基石。 当你点击一个嵌套在多层 div 内的按钮时，浏览器如何决定先执行哪个元素的事件处理程序？这个问题的答案隐藏在事件传播的三个阶段中：捕获阶段、目标阶段和冒泡阶段。

事件流的三个阶段

想象一个从文档根节点到你点击的目标元素，再返回的旅程。

1. 捕获阶段：事件从最外层的 document 对象开始，向下逐层穿过每一级DOM元素（例如 html -> body -> div.outer -> div.inner），直到到达目标元素。在这个阶段，你可以截获事件，使其在到达目标之前就被处理。

2. 目标阶段：事件到达你实际点击的那个元素。这个元素是事件流的终点（在捕获阶段）也是起点（在冒泡阶段）。

3. 冒泡阶段：事件从目标元素开始，向上传播回每一级DOM元素（例如 div.inner -> div.outer -> body -> html -> document），就像水中的气泡浮出水面一样。这是最常用、默认的事件处理阶段。

下面这张流程图清晰地展示了事件在嵌套的DOM树中的传播路径：

实战：观察事件分发顺序

创建一个简单的HTML结构来测试事件流。

<div id="outer" style="padding: 20px; background: #lightblue;">
  外层
  <div id="inner" style="padding: 20px; background: #lightgreen;">
    内层
    <button id="target">点击我</button>
  </div>
</div>

添加事件监听器，并使用第三个参数（useCapture）来指定监听的阶段。

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const target = document.getElementById('target');

// 冒泡阶段监听（第三个参数为 false 或省略）
outer.addEventListener('click', function() {
    console.log('冒泡阶段：outer 被触发');
});
inner.addEventListener('click', function() {
    console.log('冒泡阶段：inner 被触发');
});

// 捕获阶段监听（第三个参数为 true）
document.addEventListener('click', function() {
    console.log('捕获阶段：document 被触发');
}, true);
outer.addEventListener('click', function() {
    console.log('捕获阶段：outer 被触发');
}, true);
inner.addEventListener('click', function() {
    console.log('捕获阶段：inner 被触发');
}, true);

// 目标元素的监听（默认行为）
target.addEventListener('click', function() {
    console.log('目标阶段：target 被触发');
});

点击按钮后，控制台将输出以下顺序：

1. 捕获阶段：document 被触发
2. 捕获阶段：outer 被触发
3. 捕获阶段：inner 被触发
4. 目标阶段：target 被触发
5. 冒泡阶段：inner 被触发
6. 冒泡阶段：outer 被触发

注意：对于目标元素本身，事件监听器的触发顺序按照代码的注册顺序，与 useCapture 参数无关。

关键控制：stopPropagation

你可以使用 stopPropagation() 方法阻止事件继续传播。

target.addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件继续冒泡
    console.log('事件在 target 停止传播');
});

此时点击按钮，输出将只到 target 为止，inner 和 outer 的冒泡阶段监听器将不会被触发。如果在捕获阶段就阻止，则事件甚至无法到达目标元素。

应用场景

选择使用捕获还是冒泡，取决于你的需求。

• 事件委托：这是最典型的冒泡应用。你可以在一个公共父元素（如 ul）上监听所有子元素（如 li）的事件，而不是给每个子元素单独绑定监听器。这优化了内存和性能。

    // 在父元素上监听，通过 event.target 判断具体触发事件的子元素
    document.getElementById('list').addEventListener('click', function(e) {
        if (e.target.tagName === 'LI') {
            console.log('列表项被点击：', e.target.textContent);
        }
    });

• 全局拦截：捕获阶段常用于需要在事件到达目标前进行全局检查或拦截的场景，例如在 document 上阻止所有 contextmenu（右键菜单）事件。

记住：默认情况下，addEventListener 的第三个参数为 false，即在冒泡阶段监听。理解并善用事件流的三个阶段，将使你对页面交互拥有更精细、更强大的控制力。