Javascript 事件的传播

A Dirty Deal

概述

• 事件根据事件模型规定的传播路径被逐级传递, 在传播过程中依次触发对应的事件监听器, 然后被继续传递. 直到完成事件传播, 或是传播过程被终止.

事件路径 和 DOM 分支 ( branch )

• 从事件源所在节点 ( event.target ) 逐级向上一直追溯到 window 对象的路径中的一系列节点, 构成了一个 DOM 分支.
• 这个分支就是该事件传播的路径
• 示意图:

  • 在下图中, 元素就是 事件源所在节点. 它和父级元素层层向上构成了一个事件在不同阶段传播的路径.

    
    
    

    事件传播的路径和事件传播的三个阶段

事件传播的阶段 Event Propagation Phases:

• 事件传播是JS DOM事件中各阶段的概括, 由三个阶段组成:

  • 捕获阶段 capture phase

    • 事件从 window 对象逐级向下传播, 直到目标对象的父节点的过程

  • 目标阶段 target phase

    • 事件到达目标节点自身

  • 冒泡阶段 bubble phase

    • 事件从目标的父节点逐级向上传播, 一直到达 window 对象的过程

event.target 和 event.currentTarget

• event.target :
  • 事件源, 事件传播路径的中心
• event.currentTarget:
  • 在事件传播过程中, 每次触发监听器时, 监听器所在(绑定)的对象.

监听器的绑定

• 在一个节点上, 可以绑定多个同类型的事件监听器. 当事件传播到这个节点上的时候, 监听器根据绑定的先后依次触发. (队列)

不同类型的监听器在三个阶段的表现:

• 使用 addEventListener() 绑定事件监听器
  target.addEventListener(type, listener[, useCapture])
  • 捕获型事件监听器:
    • 在 addEventListener() 函数中, 第三个参数 (捕获标志位) 为true 的事件监听器.
      el.addEventListener('click', listener, true)

• 捕获阶段:

  • 在捕获阶段的路径中, 捕获器 ( capturer listener ) 会主动捕获事件, 然后触发.

• 目标阶段:

  • 在这个阶段, 目标节点上的所有监听器会按照绑定的顺序依次地触发.

• 冒泡阶段:

  • 在这个阶段, 节点上的非捕获监听器会被触发.

• 不会冒泡的事件

  • 需要注意的是, 有一部分事件是不会冒泡的:
    • 例如 focus, blur, load 事件.
    • 因此它们的监听器必须设置为捕获器才会有效.

控制事件传播

• event.stopPropagation()

  • 事件的传播路径停止在当前监听器的节点上.
  • 路径中该位置上的其他同类事件监听器仍然能够响应事件.

• event.stopImmediatePropagation()

  • 事件的传播立即结束.
  • 该位置上的其他同类事件监听器不会被触发

• 取消事件默认行为

  • event.preventDefault()

• 参考
  • https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events
  • https://www.sitepoint.com/event-bubbling-javascript/