事件捕获阶段需将addEventListener第三个参数设为true或配置对象中capture设为true，此时监听器在事件从document向目标传播时触发，顺序为外层到内层。
在 JavaScript 中，事件捕获阶段是事件传播的三个阶段之一（捕获 → 目标 → 冒泡），默认情况下 addEventListener 只在**冒泡阶段**触发。要让它在**捕获阶段**触发，关键就是把第三个参数设为 true，或者传入一个配置对象并把 capture 属性设为 true。
使用布尔值形式：直接传 true
这是最简洁的方式，第二个参数是回调函数，第三个参数为 true 表示启用捕获：
element.addEventListener('click', handler, true)- 此时，当事件从
document向下传递到目标元素途中，该监听器就会被触发 - 比如给父容器和子元素都用
capture: true绑定 click，点击子元素时，父容器的捕获监听器会先于子元素的目标阶段执行
使用配置对象形式：显式写 capture: true
更现代、更灵活的写法是传入一个配置对象，其中 capture 是核心属性：
element.addEventListener('click', handler, { capture: true })- 这种方式便于后续扩展其他选项，比如同时设置
once: true或passive: true - 注意：
capture是对象中的一个布尔属性，不是独立参数；不能写成{ capture: 'true' }（字符串无效）
捕获阶段的实际效果与验证方法
想确认是否真的进入了捕获阶段，可以这样测试：
- 给嵌套结构的多个层级（如
div#outer > div#inner > button）分别添加带capture: true的监听器 - 在每个回调中打印当前
this或event.currentTarget，再看控制台输出顺序 - 你会看到：外层容器 → 中层容器 → 目标元素（捕获方向），而不是反过来（冒泡方向）
- 对比不加
capture或设为false的行为，差异一目了然
注意事项和常见误区
虽然配置简单，但几个细节容易出错：
-
capture: true只影响当前监听器的触发时机，不影响其他监听器——同一元素上可同时存在捕获和冒泡监听器 - 使用
removeEventListener移除时，第三个参数必须完全一致：如果绑定时用了{ capture: true }，移除时也得传同样的对象（或用true） -
capture不能在事件处理函数内部动态切换，它是注册时决定的静态行为 - 像
focus、blur这类事件默认不冒泡，但它们仍支持捕获阶段（只要浏览器支持该事件的捕获）
