addEventListener第三个参数true表示捕获阶段触发，false（默认）表示冒泡阶段；DOM事件流分捕获→目标→冒泡三阶段，捕获从document向下传递，冒泡则反向向上。
在 JavaScript 中，addEventListener 的第三个参数用来指定事件监听器是在**捕获阶段**还是**冒泡阶段**触发。设为 true 表示启用捕获，false（默认）表示在冒泡阶段执行。
捕获阶段是什么
DOM 事件流分为三个阶段：捕获 → 目标 → 冒泡。捕获阶段从 document 开始，逐级向下传递到目标元素；目标阶段是事件到达绑定元素本身；冒泡阶段则反向向上冒泡到 document。
默认情况下（第三个参数为 false 或省略），监听器只在冒泡阶段响应。若想在捕获阶段提前拦截事件（比如阻止后续传播、统一处理某些行为），就需要把第三个参数设为 true。
怎么写捕获监听器
语法和普通监听器一样，只在第三个参数传 true：
立即学习“Java免费学习笔记（深入）”；
element.addEventListener('click', handler, true);
// 或者用 options 对象写法（更推荐，见下文）
element.addEventListener('click', handler, { capture: true });
</font>
捕获 vs 冒泡的实际表现
假设有如下嵌套结构：
<div id="outer"> <div id="inner">点我</div> </div> </font>
给两个元素都添加点击监听器：
outer.addEventListener('click', () => console.log('outer 捕获'), true)inner.addEventListener('click', () => console.log('inner 目标'), false)outer.addEventListener('click', () => console.log('outer 冒泡'), false)
点击 inner 时，输出顺序是：
outer 捕获 → inner 目标 → outer 冒泡
这说明捕获阶段确实先于目标阶段执行，而冒泡阶段后于目标阶段。
用 options 对象替代布尔值（现代写法）
推荐使用对象形式传参，语义更清晰，也方便扩展其他选项：
-
{ capture: true }—— 启用捕获 -
{ capture: false }—— 冒泡（默认，可省略） -
{ once: true }—— 事件只触发一次 -
{ passive: true }—— 告诉浏览器不会调用preventDefault()（常用于滚动优化）
多个选项可以组合，例如：
element.addEventListener('touchstart', handler, { capture: true, passive: false });
