事件冒泡和捕获的本质区别是事件流方向相反：捕获阶段从根节点向下传递至目标元素，冒泡阶段从目标元素向上回传至根节点；默认监听器只在冒泡阶段触发，需显式设置useCapture为true或capture:true才进入捕获阶段。
事件冒泡和捕获的本质区别是什么
事件冒泡和捕获是浏览器处理 dom 事件的两个相反阶段，不是“可选模式”，而是事件流的固有组成部分。触发一个点击事件时，浏览器先从根节点向下走到目标元素（捕获阶段），再从目标元素向上回到根节点（冒泡阶段）。中间经过的所有节点都有机会响应事件——但默认只在冒泡阶段触发监听器。
关键判断：除非显式指定 useCapture 为 true，否则 addEventListener() 绑定的回调总是在冒泡阶段执行。
如何用 addEventListener 控制事件阶段
控制权完全在 addEventListener() 的第三个参数。它不只有布尔值一种写法，现代写法推荐使用配置对象，更清晰也支持更多选项。
-
element.addEventListener('click', handler, true)→ 在捕获阶段监听 -
element.addEventListener('click', handler, false)→ 在冒泡阶段监听（false是默认值，可省略） -
element.addEventListener('click', handler, { capture: true, once: true })→ 捕获阶段 + 只触发一次
注意：onclick 等内联事件属性和 element.onclick = handler 写法**只能绑定到冒泡阶段**，无法参与捕获。
立即学习“Java免费学习笔记（深入）”；
stopPropagation() 和 stopImmediatePropagation() 的差异
两者都用于中断事件流，但作用范围不同：
-
event.stopPropagation()：阻止事件继续向父/子节点传播（即中断当前阶段的后续路径），但**不影响同一节点上其他同阶段监听器的执行** -
event.stopImmediatePropagation()：不仅中断传播，还立即终止当前节点上**剩余所有同阶段监听器**的调用
常见误用场景：给同一个元素绑了多个 click 监听器，又只调用 stopPropagation()，结果别的监听器仍会执行——这时该用 stopImmediatePropagation()。
实际开发中哪些地方必须考虑捕获阶段
绝大多数业务逻辑写在冒泡阶段就够了，但以下场景绕不开捕获：
- 全局防误触：比如在
document上用捕获监听click，提前拦截弹窗外点击关闭，避免被子元素的stopPropagation()干扰 - 框架底层封装：react 合成事件、vue 的
@click.capture编译后都依赖原生捕获机制做事件委托优化 - 输入框聚焦管理：在
body捕获focusin（它本身支持捕获且冒泡），比监听每个 input 的focus更轻量
注意：focus、blur 不冒泡，但 focusin、focusout 支持捕获和冒泡，这是容易忽略的兼容细节。
document.addEventListener('click', (e) => { console.log('document 捕获'); }, true); document.addEventListener('click', (e) => { console.log('document 冒泡'); }, false); // 点击任意子元素，控制台先输出 'document 捕获'，后输出 'document 冒泡'事件流不是非此即彼的选择题，而是一条可分段介入的管道。真正难的不是记住阶段顺序，而是在复杂嵌套结构里判断：该在哪一层、哪个阶段、用哪种阻止方式，才能让事件既不漏掉也不误伤。