捕获阶段是dom事件流的第一个阶段,从document开始逐级向下传递到目标元素;可通过addeventlistener第三个参数设为true或{capture:true}启用,在此阶段拦截点击事件。

在 JavaScript 中,可以通过为元素添加事件监听器并设置 useCapture 参数为 true,在捕获阶段拦截点击事件。
什么是捕获阶段?
DOM 事件流分为三个阶段:捕获阶段 → 目标阶段 → 冒泡阶段。捕获阶段从 document 开始,逐级向下传递到目标元素。默认情况下,addEventListener 在冒泡阶段触发(useCapture 默认为 false)。要拦截点击事件的捕获阶段,必须显式启用捕获。
如何用 addEventListener 捕获点击事件
调用 addEventListener 时,第三个参数传入 true 或配置对象 { capture: true }:
elem.addEventListener('click', handler, true)elem.addEventListener('click', handler, { capture: true })
例如,点击一个按钮时,在其父容器上用捕获方式监听,能比目标元素更早收到事件:
document.getElementById('parent').addEventListener('click', function(e) {
console.log('捕获阶段:parent 被触发');
}, true); // 注意这里 true
document.getElementById('button').addEventListener('click', function(e) {
console.log('目标阶段:button 被触发');
}); // 默认 false,处于冒泡阶段
捕获阶段拦截的典型用途
-
全局点击拦截:比如点击页面任意位置关闭弹窗,可在
document上用捕获监听,避免被子元素的stopPropagation()阻断 - 权限或条件预检:在事件到达目标前统一判断是否允许执行(如登录校验、操作权限)
- 调试与监控:记录事件传播路径,辅助排查事件未触发或被意外阻止的问题
注意事项
- 同一个元素上,捕获监听器和冒泡监听器会分别触发,互不影响
-
e.stopPropagation()在捕获阶段调用,会阻止事件继续向目标传播(也阻止后续的冒泡) -
e.stopImmediatePropagation()会阻止同一阶段其他监听器执行(包括同为捕获的其他 handler) - 不要混淆
eventPhase值:1 = CAPTURING_PHASE,2 = AT_TARGET,3 = BUBBLING_PHASE
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











