事件冒泡是事件从目标元素逐级向上传播至document的过程；点击嵌套按钮时，依次触发按钮、div、body和document的click处理函数；可用stopPropagation()阻止冒泡，preventDefault()阻止默认行为，stopImmediatePropagation()同时阻止冒泡和其他同类型监听器执行。

事件冒泡是 JavaScript 中事件传播的默认行为之一：当某个元素上的事件被触发时，该事件会先在目标元素上执行，然后逐级向上传播到其父元素、祖父元素，直至 document 根节点。

事件冒泡是怎么发生的？

比如点击一个按钮，而这个按钮嵌套在 div 里，div 又在 body 中。点击按钮时，click 事件会按如下顺序触发：

• 先触发按钮自身的 click 处理函数
• 再触发外层 div 的 click 处理函数
• 接着触发 body 的 click 处理函数
• 最后可能到达 document（取决于绑定方式）

这种“从内向外”的传播路径就是冒泡阶段（与之相对的是捕获阶段，从外向内）。大多数 DOM 事件默认支持冒泡，如 click、mousedown、keyup 等；但也有例外，比如 focus、blur、mouseenter、mouseleave 不冒泡。

如何阻止事件冒泡？

使用事件对象的 stopPropagation() 方法可立即中断当前事件的后续传播路径，阻止它继续向上冒泡。

• 在事件处理函数中调用 event.stopPropagation()
• 它只影响当前事件流，不影响同一元素上其他监听器的执行
• 注意：IE8 及更早版本需用 event.cancelBubble = true

示例：

button.addEventListener('click', function(e) {
  console.log('按钮被点击');
  e.stopPropagation(); // 阻止冒泡
});
div.addEventListener('click', function() {
  console.log('div 被点击'); // 这行不会执行
});

还有没有其他相关控制方法？

除了 stopPropagation，还有两个常用方法常被混淆，但作用不同：

• preventDefault()：阻止事件的默认行为（比如点击链接不跳转、表单不提交），不影响冒泡
• stopImmediatePropagation()：不仅阻止冒泡，还阻止同一元素上其他同类型事件监听器的执行

如果想彻底禁用某事件的所有效果，有时需要同时调用 preventDefault() 和 stopPropagation()。

什么时候该阻止冒泡？

典型场景包括：

• 下拉菜单点击内部选项时，不希望触发外层遮罩层的关闭逻辑
• 模态框内的表单按钮点击，避免误触背景区域的关闭事件
• 自定义右键菜单，防止浏览器默认右键菜单弹出（需配合 preventDefault）

但不要滥用：过度阻止冒泡可能破坏组件间合理的事件协作，尤其在使用事件委托时。