事件传播分捕获、目标、冒泡三阶段:捕获从window向目标节点传递,需显式启用;目标阶段是二者交汇点;冒泡从目标向祖先传递,默认开启;stoppropagation()终止整个事件流。

事件冒泡和事件捕获是浏览器处理 DOM 事件时固有的两个传播阶段,它们不是互斥的“模式”,而是同一事件流中先后发生的自然过程:先捕获、再目标、最后冒泡。
事件捕获:从外向内的预处理通道
事件捕获是从 window 开始,依次经过 document、、、父元素,最终抵达被点击的真实元素(目标节点)。这个阶段默认不触发任何监听器,必须显式启用:
- 通过
addEventListener(type, handler, true)设置第三个参数为 true - 常用于在事件到达目标前做统一拦截,比如权限校验、全局快捷键屏蔽
- 同一元素上多个捕获监听器按注册顺序执行;不同层级则严格按 DOM 深度由外向内
事件冒泡:从内向外的默认响应路径
事件冒泡从目标元素出发,逐级向上通知所有祖先节点,直到 document 甚至 window。这是开发者最常接触的部分,也是事件委托的基础:
Java JDK 25 来自 OpenJDK 官方归档,版本为 JDK 25,本条下载地址已指向官方 Windows x64 zip 安装包直链,适合调试旧项目或兼容旧版 Java 运行环境。
- 无需额外参数,默认即开启(
useCapture省略或设为 false) - 典型应用:给列表容器绑定一个 click 监听器,靠
event.target区分子项,避免为每个<li>单独绑定 - 动态添加的子元素自动受益,无需重新绑定
目标阶段:捕获与冒泡交汇的中心点
当事件到达真正被交互的元素时,进入目标阶段。此时无论监听器设为捕获还是冒泡,都会执行:
- 同一个元素上,
useCapture: true的监听器总在useCapture: false之前运行 - 例如点击按钮,会先执行该按钮上所有
true监听器,再执行所有false监听器 - 它不属于纯粹的捕获或冒泡,而是二者共用的“交汇站”
如何控制传播行为
event.stopPropagation() 会立即终止整个事件流,包括后续捕获、目标(同元素已执行的除外)、冒泡阶段。它不分阶段,一停全停:
- 在捕获阶段调用 → 后续捕获监听器、目标阶段、冒泡阶段全部跳过
- 在目标阶段调用 → 同元素其他监听器照常执行,但冒泡阶段不再发生
- 没有只停冒泡或只停捕获的原生 API,需靠逻辑判断配合使用
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










