当前位置：首页 > 文章列表 > 文章 > 前端 > 事件冒泡与捕获机制详解

事件冒泡与捕获机制详解

2026-01-07 12:15:43 0浏览收藏

从现在开始，我们要努力学习啦！今天我给大家带来《事件冒泡与捕获是JavaScript中处理事件的两种机制，理解它们有助于更好地控制事件流。以下是详细解释：一、事件冒泡（Event Bubbling）定义：事件冒泡是指当一个元素上的事件被触发时，该事件会从该元素开始，逐级向上传播到其父元素，直到文档根节点。示例：假设有一个嵌套结构：

当用户点击按钮时，事件会先在按钮上触发，然后向上冒泡到 div，最后到 document。默认行为：事件冒泡是浏览器的默认行为，通常用于事件委托（event delegation）。二、事件捕获（Event Capturing）定义：事件捕获是事件传播的另一种方向，它从最外层的元素（如 document）开始，向下传递到目标元素。使用场景：事件捕获较少被直接使用，但可以通过 addEventListener 的第三个参数设置为 true 来启用。示例： document.addEventListener('click', function() { console.log('捕获阶段'); }, true); document.getElementById('child').addEventListener('click', function() { console.log('目标阶段'); }, false》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

事件冒泡和捕获的本质区别是传播方向不同：捕获阶段从document向下传递至目标元素，冒泡阶段从目标元素向上传递回document；两者是浏览器固定执行的两个连续阶段，非互斥模式。

javascript中的事件冒泡和捕获是什么_如何阻止事件传播？

事件冒泡和捕获的本质区别是什么？

事件冒泡和捕获是 DOM 事件传播的两个阶段，不是互斥的“模式”，而是浏览器**固定执行的流程**：先捕获（从 document 向下到目标元素），再到达目标，最后冒泡（从目标向上回到 document）。只有注册了对应阶段的监听器，才会触发对应回调。

关键点在于：addEventListener() 的第三个参数决定监听哪个阶段：

false（默认）→ 只响应冒泡阶段
true → 只响应捕获阶段
{capture: true} → 同样是捕获阶段（现代写法）

如何用 `stopPropagation()` 阻止事件继续传播？

stopPropagation() 会立即中断当前事件在**当前阶段**的后续传播路径，但不影响同一元素上其他同阶段监听器的执行。

常见误用场景：

在捕获阶段调用 → 后续的捕获监听器不会触发，但目标阶段和冒泡阶段仍会继续
在目标阶段调用 → 冒泡阶段完全终止，捕获和目标阶段已执行完毕，不再向上冒泡
在冒泡阶段调用 → 后续父级元素的冒泡监听器全部跳过

element.addEventListener('click', function(e) {
  console.log('捕获阶段');
  e.stopPropagation(); // 阻止继续捕获，目标和冒泡也不会发生
}, true);

target.addEventListener('click', function(e) {
  console.log('目标阶段');
  e.stopPropagation(); // 冒泡就此打住，父级收不到
});

为什么 `stopImmediatePropagation()` 更彻底？

stopImmediatePropagation() 不仅阻止传播，还**立即终止当前事件流中所有剩余监听器的执行**，包括同一元素、同一阶段的其他监听器。

适用场景：

有多个 addEventListener() 绑定在同一个元素+同一阶段，且希望某个监听器优先执行并独占控制权
第三方库或插件监听器可能干扰你的逻辑，需确保自己的处理完就“封口”

btn.addEventListener('click', () => console.log('first'));
btn.addEventListener('click', (e) => {
  console.log('second');
  e.stopImmediatePropagation(); // 'first' 已执行，但后续同阶段监听器不会再触发
});
btn.addEventListener('click', () => console.log('third')); // 永远不会输出