JavaScript事件捕获与冒泡详解：事件流三阶段及stopPropagation实战

脚本专家

在浏览器中，点击一个按钮时，事件并不是瞬间只发生在按钮上，而是经历一次从顶层到目标、再从目标回顶层的完整传播过程，这就是DOM事件流。理解事件流是掌握JavaScript交互开发的基础。

事件流的三阶段
W3C标准将事件流分为三个阶段：
1. 捕获阶段（Capturing Phase）：从window/document向下传播到目标元素的父元素，事件在此“寻找”目标。默认监听器不会在此阶段触发，除非明确指定。
2. 目标阶段（Target Phase）：事件到达实际触发的元素，即event.target。
3. 冒泡阶段（Bubbling Phase）：从目标元素向上传播回window，这是最常用的阶段，大多数事件监听器默认在此阶段触发。

代码实战：控制捕获与冒泡
使用addEventListener的第三个参数useCapture控制监听器在哪个阶段触发：true为捕获阶段，false（默认）为冒泡阶段。

示例HTML结构：

2. <div id="grandparent">
3.   爷爷
4.   <div id="parent">
5.     爸爸
6.     <div id="child">儿子</div>
7.   </div>
8. </div>

复制代码

注册监听器：

2. const grandparent = document.getElementById('grandparent');
3. const parent = document.getElementById('parent');
4. const child = document.getElementById('child');
6. // 捕获阶段
7. grandparent.addEventListener('click', () => console.log('Grandparent - Capture'), true);
8. parent.addEventListener('click', () => console.log('Parent - Capture'), true);
10. // 冒泡阶段
11. parent.addEventListener('click', () => console.log('Parent - Bubble'));
12. child.addEventListener('click', () => console.log('Child - Bubble'));
14. // 点击child后控制台输出：
15. // Grandparent - Capture
16. // Parent - Capture
17. // Child - Bubble
18. // Parent - Bubble

复制代码

点击child时，捕获阶段先执行grandparent和parent的捕获监听器，然后到达目标child（冒泡监听器执行），最后向上冒泡到parent（冒泡监听器执行）。

阻止事件传播
使用event.stopPropagation()可阻止事件在DOM树中继续传播（同时阻止后续捕获和冒泡）：

2. child.addEventListener('click', function(event) {
3.   event.stopPropagation();
4.   console.log('Child clicked, stop!');
5. });

复制代码

使用event.stopImmediatePropagation()则不仅阻止传播，还阻止当前元素上其他相同事件的监听器执行：

2. child.addEventListener('click', function(event) {
3.   event.stopImmediatePropagation();
4.   console.log('Handler 1');
5. });
6. child.addEventListener('click', function() {
7.   console.log('Handler 2');  // 不会执行
8. });

复制代码

注意：在原生JavaScript中，return false不会阻止事件传播，必须显式调用stopPropagation或stopImmediatePropagation。

应用场景
1. 事件委托：利用冒泡，在父元素上统一监听子元素事件，提升性能。

2. ul.addEventListener('click', function(event) {
3.   if (event.target.tagName === 'LI') {
4.     console.log('Clicked:', event.target.innerText);
5.   }
6. });

复制代码

2. 模态框关闭逻辑：点击遮罩层关闭弹窗，点击弹窗内部不关闭。

2. overlay.addEventListener('click', () => closeModal());
3. modal.addEventListener('click', (event) => event.stopPropagation());

复制代码

3. 高级拦截：在捕获阶段提前终止事件，实现全局权限检查或日志记录。

2. document.addEventListener('click', function(event) {
3.   if (event.target.disabled) {
4.     event.stopPropagation();
5.     event.preventDefault();
6.   }
7. }, true);

复制代码

掌握事件流三个阶段：先捕获，后目标，再冒泡；利用冒泡实现事件委托；使用stopPropagation控制事件传播范围。这是JS交互开发的必备技能。

热心网友7

非常感谢楼主的详细讲解，把事件流的三个阶段、stopPropagation和stopImmediatePropagation的区别都说得非常清楚。尤其是那个“爷爷、爸爸、儿子”的例子，一下子就把捕获和冒泡的执行顺序讲明白了。之前我写事件委托时总担心会影响性能，现在理解了冒泡机制，用起来更有底气了。有个小问题想请教：如果同时在一个元素上绑定了捕获和冒泡监听器（比如parent），点击该元素自身时，两个监听器都会触发吗？还是只触发其中一个？期待楼主或各位坛友继续交流。