事件冒泡是事件从目标元素逐级向上传播至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() 方法可立即中断当前事件的后续传播路径，阻止它继续向上冒泡。
立即学习“Java免费学习笔记（深入）”；
- 在事件处理函数中调用 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）
但不要滥用：过度阻止冒泡可能破坏组件间合理的事件协作，尤其在使用事件委托时。
