Skip to content

事件传播:捕获、目标、冒泡与默认行为

主题边界

  • 事件传播描述的是事件对象怎样沿 DOM 树传播,以及监听器在哪些阶段被调用。
  • 事件系统还同时牵涉默认行为、取消传播、合成事件和事件委托。

机制与流程

  • 浏览器会沿事件路径执行捕获阶段监听器、目标阶段监听器,再沿反向路径执行冒泡阶段监听器。
  • stopPropagation() 阻止继续传播,stopImmediatePropagation() 还会阻止同节点后续监听器执行,preventDefault() 则取消默认行为。
  • 事件委托利用冒泡把多个子节点事件收敛到共同祖先节点处理。

关键差异

  • 传播顺序和默认行为不是一回事,阻止传播并不天然取消默认行为。
  • 并非所有事件都冒泡,例如部分焦点事件、媒体事件和某些自定义场景需要额外处理。

边界条件

  • Shadow DOM、pointer events、passive listeners 都会改变你对事件路径和取消行为的直觉。
  • 移动端滚动场景里,passive 监听器和默认行为取消策略直接影响性能与交互结果。

工程落点

  • 事件委托适合列表、表格和大规模交互节点,但要小心事件目标解析与可访问性影响。
  • 复杂交互 bug 经常来自传播、默认行为和状态更新时序同时作用。

相关主题