前端事件冒泡
DOM 事件从目标元素向外层祖先节点传播的阶段，以及 stopPropagation 的典型影响。
#tech / dev / frontend
#type / concept
#status / growing
[!info] related notes
前端事件冒泡
事件冒泡指的是：事件先在目标元素上触发，然后沿着 DOM 树一层层向外层祖先节点传播。
一句话定义
如果一个点击事件发生在子元素上，父元素、祖先元素也可能依次收到这个事件，这就是事件冒泡。
最小例子
<div id="parent">
<button id="child">click</button>
</div>child.addEventListener('click', () => console.log('child'))
parent.addEventListener('click', () => console.log('parent'))点击按钮时，通常会依次看到：
child
parent为什么它重要
- 父元素可以统一处理多个子元素的事件
- 这也是事件委托成立的重要基础
- 如果不了解冒泡，很容易写出重复绑定或错误联动逻辑
如何阻止继续冒泡
event.stopPropagation()这会阻止事件继续向外层祖先节点传播。
一个真实场景
右键菜单或弹层场景里，内层元素的事件如果不阻止冒泡，外层容器可能也会收到同一次事件，导致菜单打开错位或逻辑串台。
和完整事件传播的关系
完整事件传播通常分为三个阶段：捕获、目标、冒泡。当前这篇只聚焦冒泡阶段；整体可继续看 frontend-event-propagation。
最短记忆方式
事件从里往外传，就是冒泡。