事件流分为捕获、目标、冒泡三阶段，addeventlistener的usecapture参数决定监听阶段，stoppropagation()中断整个事件流而非仅冒泡。
事件流就是事件在 DOM 中“走过的路线”
当你点击一个 <button></button>，这个点击动作不会只停留在按钮上——它会沿着 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 及更早），但现代项目基本不用考虑
事件委托依赖冒泡，但捕获也能做“反向委托”
日常说的“事件委托”（比如给 <ul></ul> 绑 click 来代理所有 <li>）本质是利用了冒泡特性。但捕获阶段其实提供了另一种思路：
立即学习“Java免费学习笔记（深入）”；
- 把监听器放在外层容器，设
useCapture = true，就能在事件“下来”的途中就处理，比如快速拦截非法点击、做权限预检 - 某些 UI 库（如 React）内部会用捕获阶段捕获全局按键（如
Escape关闭弹窗），避免被子组件的stopPropagation()干扰 - 不要混用：如果外层用捕获监听，内层又用
stopPropagation()，那捕获链可能在半路就断了——这点容易被忽略，调试时要特别注意事件触发点是否真的进入了你期望的阶段
捕获和冒泡不是“选一个用”，而是同一事件流的两个方向段落；真正容易出错的，往往不是记不清顺序，而是忘了 useCapture 参数的默认值是 false，以及 stopPropagation() 会一刀切掉整条流。
