什么是JavaScript中的事件冒泡和捕获_如何控制事件传播？

苏承栈

2026-10-22 • 👁 0人浏览过

事件传播分捕获、目标、冒泡三阶段；默认冒泡，addEventListener第三参数为true启用捕获；stopPropagation阻止传播，事件委托利用冒泡实现高效监听。 JavaScript中的事件冒泡和事件捕获，是事件在DOM树中传播的两种相反方向机制。默认情况下，事件处理发生在冒泡阶段；而捕获阶段需要显式开启。控制传播的关键，在于理解三阶段事件流，并合理使用事件对象的方法和监听器参数。事件传播的三个阶段一次点击等事件触发后，并非只在目标元素上执行，而是经历完整路径：捕获阶段：事件从

window

→

document

→ 祖先元素 → 目标元素，自上而下传递目标阶段：事件到达被点击（或触发）的那个具体元素，此时该元素的监听器执行冒泡阶段：事件从目标元素 → 父元素 →

document

→

window

，自下而上传递如何区分和启用捕获或冒泡通过

addEventListener

的第三个参数决定监听时机：写

false

（或省略）→ 在冒泡阶段响应（默认行为）写

true

→ 在捕获阶段响应旧版IE（IE8及以下）不支持捕获，只认冒泡注意：

onclick

等L0级绑定方式只有冒泡，没有捕获能力。立即学习 “ Java免费学习笔记（深入） ”； Trae win Trae Windows 官方版本现已全面支持 Win10 和 Win11 系统（64位）。国内开发者可直接访问 Trae 中文官网（trae.cn 或 trae.com.cn），一键下载官方正版 .exe 安装包，享受国内直连的高速稳定体验。安装过程极其简便，双击即可运行，并支持一键无缝导入 VS Code 或 Cursor 的原有主题、快捷键及插件配置。登录支持手机号、微信或稀土掘金账号。内置免费的豆包与 DeepSeek 等顶级大模型，让你开箱即用，轻松开启高效的 AI 智能编程之旅。下载阻止事件继续传播当不希望事件影响到其他层级时，可用以下方法：

e.stopPropagation()

：立即中断当前阶段及后续阶段的传播（既停捕获也停冒泡）

e.stopImmediatePropagation()

：除中断传播外，还阻止同一元素上其他同类型监听器执行

e.cancelBubble = true

：IE低版本兼容写法（效果同

stopPropagation

）事件委托依赖冒泡实现利用冒泡特性，把事件监听放在父容器上，由它统一处理子元素触发的事件：节省内存：避免为大量子元素重复绑定动态适配：新增子元素无需重新绑定，天然支持关键写法：

e.target

获取真正被点击的子元素，再做判断例如列表项很多时，监听

的

click

，再用

e.target.tagName === 'LI'

识别点击位置。

相关文章