事件冒泡是DOM事件从目标元素逐级向上传播至document的过程；点击嵌套button时，监听器按inner→middle→outer顺序执行；stopPropagation仅阻止后续冒泡路径，stopImmediatePropagation则彻底中断当前事件流并阻止同一元素其他监听器执行。
事件冒泡是什么：从点击一个 <button> 开始
事件冒泡是 DOM 事件传播的默认阶段之一：当用户触发某个嵌套元素上的事件（比如点击 <button>），该事件会先在目标元素上触发，然后逐级向上传播到父元素、祖父元素，直到 document。这不是“bug”，而是浏览器设计的原始行为。
举个典型场景：
<div id="outer">
<div id="middle">
<button id="inner">点我</button>
</div>
</div>你给 #outer、#middle、#inner 都绑了 click 监听器，点击按钮后，三个监听器都会按 #inner → #middle → #outer 的顺序执行。
为什么 event.stopPropagation() 不总能解决问题
调用 event.stopPropagation() 确实能阻止冒泡，但它只影响「当前事件监听器之后的冒泡路径」，不影响同一元素上其他监听器的执行，也不影响捕获阶段。容易误判的点：
- 多个
addEventListener绑定在同一元素上时，stopPropagation对它们彼此无影响 - 如果父元素监听器用了
{ capture: true }，它其实在冒泡前就执行了，stopPropagation拦不住它 - 在框架（如 React）中直接操作原生事件，
stopPropagation可能干扰合成事件机制，导致onClick失效
什么时候该用 event.stopImmediatePropagation()
当你需要彻底中断当前事件流——包括同一元素上尚未执行的其他监听器——就得用 stopImmediatePropagation。常见于插件或组件封装场景：
button.addEventListener('click', e => {
console.log('第一个监听器');
e.stopImmediatePropagation(); // 后面这个监听器不会执行
});
button.addEventListener('click', e => {
console.log('第二个监听器'); // ← 永远不会输出
});
注意：stopImmediatePropagation 也会同时阻止冒泡，但它比 stopPropagation 更“激进”。别滥用，尤其在第三方库集成时，可能意外截断别人依赖的事件流。
立即学习“Java免费学习笔记（深入）”；
冒泡对 event.target 和 event.currentTarget 的影响
这是最容易混淆的两个属性：
-
event.target始终是**最初触发事件的元素**（比如你点的是<span>，哪怕监听器绑在<div>上） -
event.currentTarget是**当前正在执行监听器的那个元素**（即this的值），随冒泡过程变化
所以，在委托场景里判断真实点击位置，必须用 event.target；而想统一处理父容器逻辑，靠 event.currentTarget 更安全。漏掉这点，常导致「明明点了子项，却误判成点了空白处」。
