JavaScript事件流是浏览器处理事件的机制，用来描述事件在DOM中的传播路径。理解事件捕获与冒泡有助于更好地控制事件行为。一、什么是事件流？事件流是指当一个事件（如点击、键盘输入等）发生在页面上的某个元素时，这个事件会按照一定的顺序在DOM树中传播。通常有两种主要的事件流模型：事件捕获（CapturingPhase）事件从最外层的元素开始，向下传播到目标元素。例如，点击一个按钮，事件会先从w

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JavaScript事件流是什么？如何理解事件捕获与冒泡？》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

事件流分为捕获、目标、冒泡三阶段，addEventListener的useCapture参数决定监听阶段，stopPropagation()中断整个事件流而非仅冒泡。

事件流就是事件在 DOM 中“走过的路线”

当你点击一个 ，这个点击动作不会只停留在按钮上——它会沿着 DOM 树“走一趟”，经过多个节点。W3C 定义的完整路线分三段：捕获阶段 → 目标阶段 → 冒泡阶段。这不是理论设定，而是浏览器真实执行的顺序，所有原生事件（如 click、keydown）都按这个流程走（少数例外如 focus、blur 不冒泡）。

addEventListener 的第三个参数决定监听哪个阶段

关键就藏在 addEventListener 的第三个参数：useCapture。它控制你的回调函数是在捕获阶段还是冒泡阶段被调用。

• true：绑定到捕获阶段，从 window → document → → → 父元素 → 目标元素的父级（注意：目标元素本身不参与捕获）
• false 或省略：绑定到冒泡阶段，从目标元素 → 父元素 → … → document → window
• 同一个元素上，如果同时绑定了捕获和冒泡监听器，捕获先执行，冒泡后执行；目标阶段的监听器（即直接绑在目标上的）会在捕获结束后、冒泡开始前触发

document.getElementById('grandparent').addEventListener('click', () => console.log('捕获 - 祖父'), true);
document.getElementById('parent').addEventListener('click', () => console.log('捕获 - 父'), true);
document.getElementById('child').addEventListener('click', () => console.log('目标 - 子'), false); // 注意：这里仍是冒泡阶段，但发生在目标
document.getElementById('parent').addEventListener('click', () => console.log('冒泡 - 父'), false);
document.getElementById('grandparent').addEventListener('click', () => console.log('冒泡 - 祖父'), false);
<p>// 点击 child 时输出顺序：
// 捕获 - 祖父
// 捕获 - 父
// 目标 - 子
// 冒泡 - 父
// 冒泡 - 祖父</p>

阻止传播用 stopPropagation()，不是“阻止冒泡”那么简单

很多人以为 stopPropagation() 只是“不让事件往上冒”，其实它会立即中断整个事件流——包括后续的捕获、目标、冒泡阶段。一旦调用，当前阶段之后的所有节点都不会收到该事件。

• 想只停掉冒泡？没问题，但得确认你没在捕获阶段提前拦截了事件
• 想只停掉捕获？同样适用，只要在捕获阶段的监听器里调用即可
• 别用 return false 替代——它在 jQuery 里才等价于 stopPropagation() + preventDefault()，原生 JS 中只是退出函数，对事件流毫无影响
• 兼容老 IE？用 e.cancelBubble = true（仅限 IE8 及更早），但现代项目基本不用考虑

事件委托依赖冒泡，但捕获也能做“反向委托”

日常说的“事件委托”（比如给

绑 click 来代理所有
• ）本质是利用了冒泡特性。但捕获阶段其实提供了另一种思路：
  • 把监听器放在外层容器，设 useCapture = true，就能在事件“下来”的途中就处理，比如快速拦截非法点击、做权限预检
  • 某些 UI 库（如 React）内部会用捕获阶段捕获全局按键（如 Escape 关闭弹窗），避免被子组件的 stopPropagation() 干扰
  • 不要混用：如果外层用捕获监听，内层又用 stopPropagation()，那捕获链可能在半路就断了——这点容易被忽略，调试时要特别注意事件触发点是否真的进入了你期望的阶段

  捕获和冒泡不是“选一个用”，而是同一事件流的两个方向段落；真正容易出错的，往往不是记不清顺序，而是忘了 useCapture 参数的默认值是 false，以及 stopPropagation() 会一刀切掉整条流。

  今天关于《JavaScript事件流是浏览器处理事件的机制，用来描述事件在DOM中的传播路径。理解事件捕获与冒泡有助于更好地控制事件行为。一、什么是事件流？事件流是指当一个事件（如点击、键盘输入等）发生在页面上的某个元素时，这个事件会按照一定的顺序在DOM树中传播。通常有两种主要的事件流模型：事件捕获（CapturingPhase）事件从最外层的元素开始，向下传播到目标元素。例如，点击一个按钮，事件会先从window开始，依次经过document、body、div，最后到达按钮本身。事件冒泡（BubblingPhase）事件从目标元素开始，向上回传到最外层的元素。比如点击按钮后，事件会从按钮开始，依次回到div、body、document，最终到window。注意：大多数浏览器默认使用事件冒泡，而事件捕获需要通过addEventListener的第三个参数设置为true来启用。二、如何理解事件捕获与冒泡？举个例子来说明两者区别：点击我