addeventlistener事件參數_JavaScript 事件的傳播

概述

• 事件根據事件模型規定的傳播路徑被逐級傳遞, 在傳播過程中依次觸發對應的事件監聽器, 然後被繼續傳遞. 直到完成事件傳播, 或是傳播過程被終止.

事件路徑 和 DOM 分支 ( branch )

• 從事件源所在節點 ( event.target ) 逐級向上一直追溯到 window 對象的路徑中的一系列節點, 構成了一個 DOM 分支.
• 這個分支就是該事件傳播的路徑
• 示意圖:
  • 在下圖中, <td> 元素就是 事件源所在節點. 它和父級元素層層向上構成了一個事件在不同階段傳播的路徑.

事件傳播的路徑和事件傳播的三個階段

事件傳播的階段 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()

參考:

Event​developer.mozilla.org

Event Bubbling in JavaScript? Event Propagation Explained​link.jianshu.com