淺談Javascript事件委托（代理）

yunhao 發(fā)布于2019-08-21 10:38 / 2556人閱讀

摘要：開玩笑啦，提供一種方法叫做事件委托。途中經(jīng)過各個層次的，并在各上觸發(fā)捕獲事件，直到到達時間的目標。懂得了事件冒泡的過程，就很容易明白事件委托的運作原理。

首先祝大家七夕快樂。。
假如現(xiàn)在有一個的列表，里面可能會有若干個列表項。現(xiàn)在要為每一個列表項綁定相同的點擊事件，現(xiàn)在你可能會有這幾種做法：

手動為每一個列表項綁定事件；

在onload的時候，找到該列表，對其每一個子元素進行遍歷，循環(huán)綁定事件；

給每一個列表項相同的類名，一次性對其進行綁定。

方法1： 對于5個以內(nèi)的列表項還好，如果列表有很多，比如100+，那么這種方法很不現(xiàn)實，代碼會非常多，而且難以維護。
方法2： 代碼量看上去應該不多，但是同樣會難以維護，如果是動態(tài)生成的列表項，很有可能會出現(xiàn)問題。最重要的，如果有大量列表項，性能會變得十分糟糕。
方法3： 原生JS不能直接選擇class就不說了，即使通過匹配className的方法進行綁定，其性能只會比方法2還要差。

綜上所述，JS完了（誤）。

開玩笑啦，js提供一種方法叫做**事件委托**。

在講事件委托之前，我們不妨先了解一下事件的三個階段（對事件冒泡有所了解的可跳過此段）：

捕獲階段——眾里尋他千百度：
事件從文檔根節(jié)點出發(fā)，隨著DOM結(jié)構(gòu)向事件的目標節(jié)點尋找。途中經(jīng)過各個層次的DOM node，并在各node上觸發(fā)捕獲事件，直到到達時間的目標node。

目標階段——終于等到你，還好我沒放棄：
事件到達目標node，在目標node上被觸發(fā)。

冒泡階段——山谷回音：
事件在目標node上觸發(fā)后，將由DOM樹一層層向上冒泡，依次觸發(fā)，直到到達最外層的根節(jié)點。這是時間委托所利用的特點。

請原諒我用這么文藝的方式給大家講述事件觸發(fā)的故事。O(∩_∩)O

懂得了事件冒泡的過程，就很容易明白事件委托的運作原理。當列表項的事件冒泡到父元素（即列表元素）時，可以查看事件對象的target屬性，catch真正被點擊的節(jié)點元素。下面是一段簡單代碼展示了這個過程：

     
   document.getElementById("list").addEventListener("click",function(e) {
        if(e.target && e.target.nodeName == "LI") {
            //TO DO SOMETHING
        }
    });

解釋一下代碼： 獲得父級元素list，為其綁定點擊事件：如果子元素（列表項）被點擊，當事件冒泡到list時，判斷目標節(jié)點（事件來源）是否為li元素，如果是則觸發(fā)該事件。
日常的例子： 假如你是一位小學班主任，你制定了一個規(guī)則：如果班里有人早戀就必須受到懲罰（定義了事件觸發(fā)后執(zhí)行的函數(shù)）。但是學生的活動范圍是整個學校而不是局限于一個班，所以你就天天在學校里溜達（將事件綁定到父級元素）。突然看到有學生在接吻（事件句柄），你需要判斷這個學生是不是自己班里的，如果是，請暴揍他一頓（觸發(fā)事件，他還是個孩子，請不要放過他）。

當然，在真正的實際應用中也許沒有這么簡單，你也許只需要其中部分子元素綁定事件；也許還要考慮瀏覽器兼容的問題（在IE里目標元素放在srcElement屬性中而不是target中，所以最好把獲得目標元素寫成一個跨瀏覽器的函數(shù)）。不過無論如何，你不需要為不確定的DOM而經(jīng)常改變你的綁定，更不會因為過多的綁定導致性能的降低，大大降低崩潰的風險。

GPU云服務器云服務器 javascript事件委托 Javascript事件代理淺談javascript 委托事件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/85911.html

淺談事件委托機制

摘要：所謂的事件委托，簡單的來說就是將一個元素響應事件委托給另外一個元素。而正好瀏覽器當中有事件冒泡機制，一張圖簡單了解下瀏覽器的事件響應機制。適用場景在日常開發(fā)過程中，我們經(jīng)常會遇到這樣一種場景：我需要通過ajax從后端獲取數(shù)據(jù)后動態(tài)添加dom節(jié)點來展示數(shù)據(jù)，并且這些dom節(jié)點有時候又需要是可交互的，例如點擊事件。那么在我們獲取到數(shù)據(jù)之前這些dom節(jié)點是不存在的，也就是說我們沒辦法在獲...

WelliJhon 2019-08-22 15:14 評論0 收藏0
淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)

摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標合并成一張圖，使用定位截取對應圖標適當使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設置瀏覽器緩存是網(wǎng)頁優(yōu)化的重要手段之一。為什么要減少請求在性能優(yōu)化中減少請求的措施占了很大部分，比如使用雪碧這篇文章主要介紹了淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧針對瀏覽器網(wǎng)頁的一些優(yōu)化規(guī)則頁面優(yōu)化靜態(tài)資源壓縮...

Aomine 2019-08-23 13:51 評論0 收藏0
淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)

摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標合并成一張圖，使用定位截取對應圖標適當使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設置瀏覽器緩存是網(wǎng)頁優(yōu)化的重要手段之一。為什么要減少請求在性能優(yōu)化中減少請求的措施占了很大部分，比如使用雪碧這篇文章主要介紹了淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧針對瀏覽器網(wǎng)頁的一些優(yōu)化規(guī)則頁面優(yōu)化靜態(tài)資源壓縮...

luffyZh 2019-06-28 16:52 評論0 收藏0
淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)

摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標合并成一張圖，使用定位截取對應圖標適當使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設置瀏覽器緩存是網(wǎng)頁優(yōu)化的重要手段之一。為什么要減少請求在性能優(yōu)化中減少請求的措施占了很大部分，比如使用雪碧這篇文章主要介紹了淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧針對瀏覽器網(wǎng)頁的一些優(yōu)化規(guī)則頁面優(yōu)化靜態(tài)資源壓縮...

CoderStudy 2019-07-30 18:37 評論0 收藏0