事件流分捕获、目标、冒泡三阶段；默认监听器在冒泡阶段执行，可通过addEventListener第三个参数设为true或{capture:true}启用捕获阶段；stopPropagation()阻止传播，stopImmediatePropagation()还阻止同阶段其余监听器执行。
事件冒泡和事件捕获是 DOM 事件流的两个阶段，它们共同构成了完整的事件传播过程。默认情况下，我们绑定的事件监听器（如 addEventListener）处于**事件冒泡阶段**触发；但通过第三个参数可显式启用**事件捕获阶段**。理解二者顺序与原理，是解决事件委托、阻止误触发、实现精准拦截等实际问题的关键。
事件流的三个阶段：捕获 → 目标 → 冒泡
当用户在嵌套元素上触发事件（比如点击一个按钮），事件并非直接到达目标元素，而是按固定路径传播：
-
捕获阶段：事件从
document开始，逐级向下经过父元素，直到达到目标元素（如div > p > button，顺序是document → div → p → button）； - 目标阶段：事件抵达绑定事件的目标元素本身；
-
冒泡阶段：事件从目标元素开始，逐级向上传播回
document（顺序是button → p → div → document）。
注意：目标阶段既属于捕获流程的终点，也属于冒泡流程的起点，但浏览器只触发一次目标处理逻辑。
addEventListener 的第三个参数决定监听时机
语法：element.addEventListener(type, handler, options)，其中 options 可为布尔值或对象：
立即学习“Java免费学习笔记（深入）”；
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
-
false（默认）：监听器在冒泡阶段执行； -
true：监听器在捕获阶段执行； -
{ capture: true }：同true，语义更清晰； -
{ once: true }等其他选项可与capture组合使用。
同一元素上同时注册捕获与冒泡监听器时，捕获先于目标，目标先于冒泡。例如：
div.addEventListener('click', () => console.log('div 捕获'), true);
btn.addEventListener('click', () => console.log('btn 目标'));
div.addEventListener('click', () => console.log('div 冒泡'), false);
点击 btn 时输出顺序为：div 捕获 → btn 目标 → div 冒泡。
如何阻止传播？stopPropagation() 与 stopImmediatePropagation()
两者都用于中断事件流，但作用范围不同：
-
event.stopPropagation()：阻止事件继续向当前方向（捕获或冒泡）传播，但不阻止同一阶段其他监听器执行； -
event.stopImmediatePropagation()：不仅阻止传播，还立即终止当前阶段剩余所有监听器的调用（包括同元素、同阶段的其他 handler）。
例如，若 div 上绑了两个冒泡监听器，第二个调用 stopImmediatePropagation()，则第一个仍会执行，第二个之后的都不会执行。
实际应用中的典型场景
-
事件委托：利用冒泡特性，在父元素监听子元素事件（如
ul监听所有li的点击），减少监听器数量； -
全局拦截：在
document或window上用捕获监听，提前处理（如权限校验、快捷键全局响应），避免被子元素stopPropagation()阻断； -
模态框关闭：点击遮罩层关闭弹窗，但点击内部内容区不关闭——给遮罩层绑定捕获或冒泡事件，再对内容区
stopPropagation()即可。
