addEventListener的第三个参数决定事件监听阶段：true为捕获阶段，false（默认）为冒泡阶段；它影响执行顺序、stopPropagation()效果及target与currentTarget的区别。
JavaScript 监听事件不是“加个 onclick 就完事”，关键在 addEventListener 的第三个参数——它直接决定你监听的是冒泡阶段还是捕获阶段。不理解这个，就容易遇到“点子元素却触发了父元素的 handler”“阻止不了默认行为”“事件没响应”这类问题。
addEventListener 的第三个参数到底填什么？
它控制事件流的哪个阶段被监听：true 表示捕获阶段，false（或省略）表示冒泡阶段。这不是可有可无的开关，而是决定了事件处理函数执行顺序的根本机制。
-
false（默认）：handler 在冒泡阶段执行——从目标元素向上逐级触发父元素的监听器 -
true：handler 在捕获阶段执行——从window→document→ 父元素 → 目标元素，自上而下传递 -
{ once: true, capture: true }这类 options 对象里，capture字段等价于传true
为什么点击子元素，父元素的事件也触发了？
这是冒泡阶段的正常表现，不是 bug。比如给 <div id="parent"><button>点我</button></div> 都绑了 click，且都用 addEventListener('click', handler, false)，那么点击 button 会先后触发 button 和 parent 的 handler。
- 想阻止向上冒泡？在子元素 handler 里调用
event.stopPropagation() - 但注意：
stopPropagation()不影响同一阶段其他同级监听器，只阻断向上传递 - 如果用了
once: true，别指望靠stopPropagation()来“取消后续绑定”——它只管当前这次事件流
捕获阶段能用来做什么实际事？
捕获阶段适合做全局拦截，比如权限控制、快捷键统一处理、错误埋点前置。因为它是最先响应的阶段，比目标元素自己的 handler 更早拿到事件。
立即学习“Java免费学习笔记（深入）”；
- 给
document添加捕获监听：document.addEventListener('keydown', handler, true)，可提前拦截所有按键 -
表单提交前统一校验？在父
form上用捕获监听submit，比在 submit 按钮上监听更可靠（避免绕过按钮直接回车提交） - 注意：不是所有事件都支持捕获，比如
load、error等只在目标阶段触发，捕获监听无效
event.target 和 event.currentTarget 容易混淆
这是冒泡/捕获中最常踩的坑。无论哪个阶段，event.target 始终是**实际触发事件的最深节点**（比如你点的是 span，它就是那个 span）；而 event.currentTarget 是**当前正在执行 handler 的那个绑定元素**（可能是父 div，也可能是 document）。
- 在捕获阶段：target 是子元素，currentTarget 可能是 document 或 body
- 在冒泡阶段：target 不变，currentTarget 会随阶段变化，从子元素一路变成父元素
- 判断是否真点中了某个区域？优先用
event.target.matches('.my-btn')，而不是依赖this或currentTarget
事件流模型看着抽象，但真正卡住你的往往就一两个细节：第三个参数写没写、stopPropagation() 调没调对、以及把 target 和 currentTarget 当成一回事。这些地方错一点，调试时就会多花半小时找“为什么没进这个 handler”。
