DOM 事件处理阶段

5 min read

  1. 捕获阶段（Capturing phase）—— 事件（从 Window）向下走近元素。

  2. 目标阶段（Target phase）—— 事件到达目标元素。

  3. 冒泡阶段（Bubbling phase）—— 事件从元素上开始冒泡。

当一个事件发生时 —— 发生该事件的嵌套最深的元素被标记为“目标元素”（event.target）。

  • 然后，事件从文档根节点向下移动到 event.target，并在途中调用分配了 addEventListener(..., true) 的处理程序（true 是 {capture: true} 的一个简写形式）。
  • 然后，在目标元素自身上调用处理程序。
  • 然后，事件从 event.target 冒泡到根，调用使用 on<event>、HTML 特性（attribute）和没有第三个参数的，或者第三个参数为 false/{capture:false} 的 addEventListener 分配的处理程序。

每个处理程序都可以访问 event 对象的属性：

  • event.target —— 引发事件的层级最深的元素。
  • event.currentTarget（=this）—— 处理事件的当前元素（具有处理程序的元素）
  • event.eventPhase —— 当前阶段（capturing=1，target=2，bubbling=3）。