天天看點

浏覽器事件機制-事件委托

浏覽器事件機制講的也是  JavaScript 事件流,JS事件執行的整個過程分為三個階段:

  • 事件捕獲階段
  • 事件目标處理函數
  • 事件冒泡
浏覽器事件機制-事件委托

1.捕獲(Capture)階段是事件對象 event object 從 window 派發到目标對象父級的過程。

2.目标(Target)階段是事件對象派發到目标元素時的階段,如果事件類型訓示其不冒泡,那事件傳播将在此階段終止。

3.冒泡(Bubbling)階段 和捕獲相反,是以目标對象父級到 window 的過程。

在任一階段調用stopPropagation都将終止本次事件的傳播。

事件捕獲

當初發一個節點的事件時,會從DOM根節點開始,依次觸發其祖先節點的同類型事件,直到目前節點自身。事件捕獲和事件冒泡是相反的,也就是說,當使用者觸發了一個事件的時候,這個事件是從DOM樹的最上層開始觸發一直到捕獲到事件源。

事件冒泡

假如使用者單擊了一個元素,該元素擁有一個click事件,那麼同樣的事件也将會被它的祖先觸發,這個事件從該元素開始一直冒泡到DOM樹的最上層,這一過程稱為事件冒泡。 

浏覽器事件機制-事件委托

事件委托

利用冒泡機制,我們就可以進行事件委托了。那麼什麼是事件委托(事件代理)呢?通俗的講,事件就是onclick,onmouseover,onmouseout等,委托呢,就是讓别人來做,這個事件本來是加在某些元素上的,然而你卻加到别人身上來做,完成這個事件。它的原理就是利用冒泡的原理,把事件加到父級上,監聽子級的事件,來觸發執行效果。

事件委托的作用

  1. 支援為同一個DOM元素注冊多個同類型事件
  2. 可将事件分成事件捕獲和事件冒泡機制
  3. 提高性能:每一個函數都會占用記憶體空間,隻需添加一個事件處理程式代理所有事件,所占用的記憶體空間更少
  4. 動态監聽:使用事件委托可以自動綁定動态添加的元素,即新增的節點不需要主動添加也可以一樣具有和其他元素一樣的事件

繼續閱讀