JavaScript 事件流：彻底搞懂捕获、冒泡与事件委托

先看如下代码，当点击样式为 small 的div后，控制台会输出什么？猜猜输出顺序：

html

复制代码

javascript

复制代码

const large = document.querySelector('.large');

const medium = document.querySelector('.medium');

const small = document.querySelector('.small');

large.addEventListener('click', () => console.log('large 冒泡'));

large.addEventListener('click', () => console.log('large 捕获'), true);

medium.addEventListener('click', () => console.log('medium 冒泡'));

medium.addEventListener('click', () => console.log('medium 捕获'), true);

small.addEventListener('click', () => console.log('small 冒泡'));

small.addEventListener('click', () => console.log('small 捕获'), true);

输出结果是：

scss

复制代码

large 捕获

medium 捕获

small 捕获

small 冒泡

medium 冒泡

large 冒泡

这个顺序揭示了 DOM 事件流的核心机制：先捕获，再冒泡。下面我们来一起看一看：

一、DOM 事件流三阶段

DOM 标准规定，当一个事件发生时，它在 DOM 树中的传播分为三个阶段：

捕获阶段（Capture Phase） ：事件从 window 出发，沿着 DOM 树从上到下，一路传播到目标元素的父节点。

目标阶段（Target Phase）：事件到达事件源本身。

冒泡阶段（Bubble Phase） ：事件从事件源开始，沿着 DOM 树从下往上冒泡，回到 window。

画成图就是：

关键点：无论你绑定不绑定事件处理函数，这个传播过程都会发生。它传播的是"事件"，不是"处理函数"。你可以在传播路径的任意节点上拦截它。

二、addEventListener 的第三个参数

addEventListener 有三个参数：

javascript

复制代码

element.addEventListener(event, handler, useCapture);

useCapture = false（默认值）：事件处理函数在冒泡阶段触发。

useCapture = true：事件处理函数在捕获阶段触发。

也可以写成选项对象的形式：

javascript

复制代码

element.addEventListener('click', handler, {

capture: true, // 在捕获阶段触发

once: true, // 只触发一次后自动解绑

passive: true // 不会调用 preventDefault()，用于滚动性能优化

});

在 React 和 Vue 中，也有对应的写法：

冒泡阶段

捕获阶段

原生 JS

addEventListener('click', fn)

addEventListener('click', fn, true)

React

onClick={fn}

onClickCapture={fn}

Vue

@click="fn"

@click.capture="fn"

三、事件冒泡

事件冒泡 是最常用的阶段。当一个元素触发事件后，事件会像水中的气泡一样，不断向上传递到父元素、再到祖父元素，一直到 document 和 window。

1. 冒泡示例

html

复制代码

点击最内层 small 后，控制台输出：

scss

复制代码

点击了 small

点击了 medium

点击了 large

事件依次从 small → medium → large 向上冒泡，每一层绑定的事件处理函数都触发了。注意这里传递的是事件本身 （如 click 事件），而不是事件处理函数。父元素上有绑定 click 事件的，就会触发对应的处理函数；没绑定的，事件照样经过，只是什么都不发生。

2. 阻止冒泡

如果你希望只在 small 上触发事件，不让父元素也收到，可以用 e.stopPropagation()：

javascript

复制代码

document.querySelector('.small').addEventListener('click', (e) => {

e.stopPropagation(); // 阻止冒泡

console.log('点击了 small');

});

此时点击 small，只会输出 点击了 small，父元素的处理函数不会触发。

在 React 和 Vue 中阻止冒泡：

jsx

复制代码

// React