JavaScript事件冒泡与事件捕获的触发顺序及原理-js教程-PHP中文网

事件流分捕获、目标、冒泡三阶段；默认监听器在冒泡阶段执行，可通过addeventlistener第三个参数设为true或{capture:true}启用捕获阶段；stoppropagation()阻止传播，stopimmediatepropagation()还阻止同阶段其余监听器执行。

javascript事件冒泡与事件捕获的触发顺序及原理

事件冒泡和事件捕获是 DOM 事件流的两个阶段，它们共同构成了完整的事件传播过程。默认情况下，我们绑定的事件监听器（如 addEventListener）处于**事件冒泡阶段**触发；但通过第三个参数可显式启用**事件捕获阶段**。理解二者顺序与原理，是解决事件委托、阻止误触发、实现精准拦截等实际问题的关键。

事件流的三个阶段：捕获 → 目标 → 冒泡

当用户在嵌套元素上触发事件（比如点击一个按钮），事件并非直接到达目标元素，而是按固定路径传播：

捕获阶段：事件从 document 开始，逐级向下经过父元素，直到达到目标元素（如 div > p > button，顺序是 document → div → p → button）；
目标阶段：事件抵达绑定事件的目标元素本身；
冒泡阶段：事件从目标元素开始，逐级向上传播回 document（顺序是 button → p → div → document）。

注意：目标阶段既属于捕获流程的终点，也属于冒泡流程的起点，但浏览器只触发一次目标处理逻辑。

`addEventListener` 的第三个参数决定监听时机

语法：element.addEventListener(type, handler, options)，其中 options 可为布尔值或对象：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

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() 即可。