事件流分为捕获、目标、冒泡三阶段，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);
// 点击 child 时输出顺序：
// 捕获 - 祖父
// 捕获 - 父
// 目标 - 子
// 冒泡 - 父
// 冒泡 - 祖父

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

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

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

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

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