第三个参数必须传布尔值true或false，{capture: true}在现代浏览器中会静默失败；true表示捕获阶段执行，false或省略表示冒泡阶段执行。
addEventListener 的第三个参数到底传 true 还是 {capture: true}？
现代浏览器中，addEventListener 的第三个参数必须是布尔值 true（启用捕获）或 false（默认冒泡），{capture: true} 是旧版可选对象参数的写法，但仅在部分老浏览器（如 IE9+ 有限支持）中可用，且 Chrome/Firefox/Safari 当前版本已**不接受对象形式作为第三个参数**——传 {capture: true} 会静默失败，监听器根本不会注册。
正确写法只有一种：
element.addEventListener('click', handler, true);
传 true 表示进入捕获阶段；传 false 或省略，表示在冒泡阶段执行。
为什么加了 true 却没触发？常见 DOM 结构陷阱
捕获阶段从 document 开始，逐层向下经过父元素，最后到达目标元素。如果你只给最内层元素绑了 capture: true，它依然在目标阶段触发（不是捕获阶段），因为捕获路径上没有其他监听器“截住”事件。
立即学习“前端免费学习笔记（深入）”；
要真正观察捕获行为，必须在**祖先元素上绑定**，且目标元素本身不阻止传播：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 确保监听器绑定在目标元素的父级、祖父级甚至
document上 - 避免在中间某层调用
event.stopPropagation()，否则后续捕获路径中断 - 检查元素是否真实嵌套——比如
<div><p>文本</p></div>中，对div绑click+true，点击p内容时才会触发；直接点击div空白区可能因p不占满而无法触发预期捕获
捕获阶段和冒泡阶段能共存吗？
可以，而且经常需要。同一个事件类型，在同一元素上既可捕获也可冒泡：
parent.addEventListener('click', captureHandler, true); // 捕获阶段执行<br>parent.addEventListener('click', bubbleHandler, false); // 冒泡阶段执行
注意顺序：即使先绑冒泡再绑捕获，捕获阶段仍一定先于目标阶段执行，目标阶段之后才是冒泡阶段。执行顺序固定为：document → html → body → parent → target（目标阶段）→ parent → body → html → document（后半段是冒泡）。
性能上无明显差异，但滥用捕获（尤其在 document 级）可能增加事件处理开销，建议只在必要时使用，例如实现全局快捷键拦截或防误点遮罩层。
React/Vue 里还能用 capture 吗？
不能直接用。框架的合成事件系统（如 React 的 onClick）默认只支持冒泡，且封装层屏蔽了原生 addEventListener 的第三个参数。想用捕获，必须脱离框架事件系统，手动操作 DOM：
useEffect(() => {<br> const el = ref.current;<br> if (el) {<br> el.addEventListener('click', handler, true);<br> return () => el.removeEventListener('click', handler, true);<br> }<br>, []);
Vue 3 的 onMounted 同理。注意：框架更新 DOM 可能导致 ref 失效或重复绑定，务必配对清理；另外，合成事件与原生捕获监听器会同时触发，需小心逻辑冲突（比如一个阻止了默认行为，另一个还继续执行）。
真正容易被忽略的是：捕获监听器一旦绑定到 document，就始终存在，除非显式移除——很多人忘了清理，导致多次挂载后监听器堆积，点击一次触发多次回调。
