第三个参数必须传布尔值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，它依然在目标阶段触发（不是捕获阶段），因为捕获路径上没有其他监听器“截住”事件。

要真正观察捕获行为，必须在**祖先元素上绑定**，且目标元素本身不阻止传播：

• 确保监听器绑定在目标元素的父级、祖父级甚至 document 上
• 避免在中间某层调用 event.stopPropagation()，否则后续捕获路径中断
• 检查元素是否真实嵌套——比如 <div><p>文本</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></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，就始终存在，除非显式移除——很多人忘了清理，导致多次挂载后监听器堆积，点击一次触发多次回调。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！