Appearance
事件传播:捕获、目标、冒泡与默认行为
主题边界
- 事件传播描述的是事件对象怎样沿 DOM 树传播,以及监听器在哪些阶段被调用。
- 事件系统还同时牵涉默认行为、取消传播、合成事件和事件委托。
机制与流程
- 浏览器会沿事件路径执行捕获阶段监听器、目标阶段监听器,再沿反向路径执行冒泡阶段监听器。
stopPropagation()阻止继续传播,stopImmediatePropagation()还会阻止同节点后续监听器执行,preventDefault()则取消默认行为。- 事件委托利用冒泡把多个子节点事件收敛到共同祖先节点处理。
关键差异
- 传播顺序和默认行为不是一回事,阻止传播并不天然取消默认行为。
- 并非所有事件都冒泡,例如部分焦点事件、媒体事件和某些自定义场景需要额外处理。
边界条件
- Shadow DOM、pointer events、passive listeners 都会改变你对事件路径和取消行为的直觉。
- 移动端滚动场景里,passive 监听器和默认行为取消策略直接影响性能与交互结果。
工程落点
- 事件委托适合列表、表格和大规模交互节点,但要小心事件目标解析与可访问性影响。
- 复杂交互 bug 经常来自传播、默认行为和状态更新时序同时作用。