瀏覽器事件機制-事件委託

瀏覽器事件機制講的也是  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. 動態監聽:使用事件委託可以自動綁定動態添加的元素,即新增的節點不需要主動添加也可以一樣具有和其他元素一樣的事件
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章