JavaScript 中事件捕获与冒泡怎么在捕获和冒泡阶段分别绑定不同处理函数-js教程-PHP中文网

javascript中事件监听器可通过addeventlistener第三个参数usecapture控制执行阶段：设为true在捕获阶段（自document向下）执行，适合预处理；false或省略则在冒泡阶段（自目标向上）执行，适合目标响应；同一元素可同时绑定两者，执行顺序为外层捕获→内层捕获→目标捕获→目标冒泡→内层冒泡→外层冒泡；阻止传播用stoppropagation或stopimmediatepropagation。

javascript 中事件捕获与冒泡怎么在捕获和冒泡阶段分别绑定不同处理函数

在 JavaScript 中，可以通过 addEventListener 的第三个参数（useCapture）来指定事件监听器是在捕获阶段还是冒泡阶段触发。设为 true 表示在捕获阶段执行，false（默认）表示在冒泡阶段执行。

在捕获阶段绑定处理函数

将 useCapture 设为 true，该监听器会在事件从 document 向目标元素传播（即“向下”）的过程中被调用：

适用于需要提前拦截事件、统一预处理（如权限校验、日志记录）的场景
注意：只有显式设置了 true 才会进入捕获阶段；父元素的捕获监听器总比子元素的先执行
示例：btn.addEventListener('click', handler, true)

在冒泡阶段绑定处理函数

省略第三个参数或设为 false，监听器会在事件从目标元素向上传播（即“向上”）到 document 的过程中触发：

Gradle 9.8.0

下载

这是最常用的方式，兼容性好，逻辑更符合直觉（先目标后祖先）
适合目标元素自身的响应逻辑，比如按钮点击后更新 UI
示例：btn.addEventListener('click', handler) 或 btn.addEventListener('click', handler, false)

同一事件在捕获和冒泡阶段都绑定处理函数

可以对同一个元素、同一个事件类型，同时注册捕获和冒泡监听器，它们会按阶段顺序分别执行：

执行顺序是：外层捕获 → 内层捕获 → 目标自身（捕获与冒泡均可设，但目标上两者都会触发，且捕获先于冒泡）→ 内层冒泡 → 外层冒泡
目标元素上若同时绑定了捕获和冒泡监听器，捕获版会先执行，再执行冒泡版（即使它们绑定在同一元素）

示例：

parent.addEventListener('click', () => console.log('parent capture'), true);
child.addEventListener('click', () => console.log('child capture'), true);
child.addEventListener('click', () => console.log('child bubble'), false);
parent.addEventListener('click', () => console.log('parent bubble'), false);

点击 child 时输出顺序为：parent capture → child capture → child bubble → parent bubble