事件冒泡是浏览器默认的事件传播机制，子元素触发事件后自动向上传播至祖先元素；需满足事件支持冒泡、祖先绑定监听器且未禁用冒泡、事件发生在具体子元素三个条件；执行顺序为目标阶段→父元素→祖父元素→document/window；可用于事件委托等优化场景；调用stopPropagation()可阻止冒泡。

事件冒泡就是子元素上触发的事件，会自动沿着 DOM 树向上传播，依次触发父元素、祖父元素，直到 document 甚至 window 的同类型事件监听器。它不是人为“添加”的行为，而是浏览器对大多数事件（如 click、keydown、mousedown）的默认传播方式。

冒泡发生的三个前提条件

只有同时满足以下三点，冒泡才会自然发生：

• 事件本身支持冒泡（focus、blur、scroll 等不支持）
• 监听器绑定在祖先元素上，且未显式禁用冒泡阶段（即 addEventListener 第三个参数为 false 或省略）
• 事件确实发生在某个具体子元素上（目标元素存在且可交互）

冒泡的执行顺序很明确

点击一个嵌套结构中的最内层元素时，事件按如下顺序执行：

• 先执行目标元素自身的事件处理函数（目标阶段）
• 再执行其直接父元素上绑定的同类型监听器
• 接着是父元素的父元素，逐级向上
• 最终到达 document（有时到 window）

例如：<div id="A"><div id="B"><button id="C">点我</button></div></div>，三者都绑了 click 监听器，点击按钮后输出顺序一定是：C → B → A。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

冒泡不是 bug，而是设计特性

它让很多实用模式成为可能，比如：

• 事件委托：只需在 ul 上监听 click，就能响应所有动态增删的 li 子项
• 统一拦截：在 body 层做权限校验或操作日志，无需每个按钮单独加逻辑
• 简化绑定：避免为成百个列表项重复调用 addEventListener，节省内存和初始化时间

想阻止冒泡？用 event.stopPropagation()

在事件处理函数中调用该方法，可立即中断向上传播，后续祖先元素的监听器将不会执行。注意它不影响当前元素上其他同类型监听器的执行（若需完全阻止，用 stopImmediatePropagation()）。