事件冒泡与捕获是 JavaScript 中处理事件的两种机制，理解它们有助于更好地控制事件行为。以下是详细解释：一、事件冒泡（Event Bubbling）定义： 当一个元素上的事件被触发时，该事件会从该元素开始，向上传播到其父元素，直到传播到 document 或 window。示例： 假设有一个嵌套结构：

点击我

2026-05-22 16:07:21 0浏览 收藏

推广推荐

前往下载Windows工具 ➜

支持 PC / 移动端，安全直达

JavaScript 中的事件冒泡与捕获并非互斥的选择，而是浏览器严格遵循的、不可跳过的两个连续事件传播阶段：事件先从 document 开始向下“捕获”至目标元素，再从目标元素向上“冒泡”回 document；理解这一机制对精准控制事件流向、实现高效事件委托、避免干扰行为（如链接跳转或表单提交）至关重要——而 stopPropagation()、stopImmediatePropagation() 和 preventDefault() 各司其职，只有厘清它们的分工与作用时机，才能真正掌控 DOM 事件的每一个细节。

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

事件冒泡和捕获是 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')); // 永远不会输出

preventDefault() 和传播控制是两回事

preventDefault() 只影响事件的**默认行为**（如表单提交、链接跳转、右键菜单），对事件是否传播完全无影响。它常被误当成“阻止事件”，但实际和 stopPropagation() 解决的是不同问题。

典型混淆点：

• 点击 时只调 e.preventDefault() → 链接不跳转，但事件照常冒泡
• 只调 e.stopPropagation() → 父级收不到点击，但链接依然会跳转
• 两者都调 → 既不跳转，也不冒泡

真正要“阻止事件”得看你想阻什么：行为？传播？还是两者都要？别混用也别漏掉。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

Acrobat图片转PDF方法步骤详解

上一篇

Acrobat图片转PDF方法步骤详解

下一篇

Golang测试中Mock调用次数校验方法