淺談事件委托機制

WelliJhon 發布于2019-08-22 15:14 / 1165人閱讀

摘要：所謂的事件委托，簡單的來說就是將一個元素響應事件委托給另外一個元素。而正好瀏覽器當中有事件冒泡機制，一張圖簡單了解下瀏覽器的事件響應機制。

適用場景

在日常開發過程中，我們經常會遇到這樣一種場景：我需要通過ajax從后端獲取數據后動態添加dom節點來展示數據，并且這些dom節點有時候又需要是可交互的，例如點擊事件。
那么在我們獲取到數據之前這些dom節點是不存在的，也就是說我們沒辦法在獲取數據之前給這個dom節點綁定任何事件。這個時候就需要事件委托來處理這類問題。

所謂的事件委托，簡單的來說就是將一個元素響應事件委托給另外一個元素。
而正好瀏覽器當中有事件冒泡機制，一張圖簡單了解下瀏覽器的事件響應機制。

捕獲階段：在事件冒泡的模型中，捕獲階段不會響應任何事件；

目標階段：目標階段就是指事件響應到觸發事件的最底層元素上；

冒泡階段：冒泡階段就是事件的觸發響應會從最底層目標一層層地向外到最外層（根節點），事件委托即是利用事件冒泡的機制把里層所需要響應的事件綁定到外層；

簡單的說就是，我們使用document.addEventListener給dom節點綁定事件時會有個可選參數useCapture,設置為true就代表只執行事件捕捉,默認為false就代表默認是會有事件冒泡的。

因此我們跟事件委托結合起來就可以將子元素的事件委托給父元素，我們可以將事件綁定在父元素上，讓他來判斷子元素的情況并決定要不要執行該事件。

委托的優點

設想一下，假如后端返回1000個商品數據，獲取到之后每個商品又希望他是可點擊的，那么這時候如果給1000個商品都綁定事件的話，那消耗的內存可想而知是海量的。這時候事件委托就十分有意義了，你只需給一個父元素綁定事件，再執行的期間再去判斷子元素情況看是否要執行你想要的事件。

并且，委托是可以動態綁定事件的，而正常的綁定事件都是需要獲取到具體的dom節點之后才可進行。

簡易封裝

說這么多，我們最后簡單來實現一下事件委托函數吧。
核心思路就是，父元素觸發相應后判斷子元素是否滿足函數所傳入的選擇器鉤子，滿足的情況下就說明該元素需要觸發該事件。

/**
 * @param {綁定的事件名稱} event 
 * @param {想要綁定的子元素，可傳入class或者標簽名或者id} selector 
 * @param {委托的父元素，可傳入class或者id，建議傳入id} pSelector 
 * @param {事件回調函數} callback 
 * @param {回調函數需要傳入的參數} data 
 */
function delegation(event, selector, pSelector, callback, data) {
    var isId = selector.indexOf("#") === 0;
    var isTagName = selector.indexOf(".") === -1;
    var isClassName = selector.indexOf(".") === 0;
    var parent = document.querySelector(pSelector);
    parent.addEventListener(event, function(e) {
        var target = e.target;
        if (isClassName) {
            // 如果傳入class名
            if (target.className === selector.substr(1)) callback(data);
        } else if (isTagName) {
            // 如果傳入標簽名
            if (target.nodeName.toLocaleLowerCase() === selector) callback(data);
        } else if (isId) {
            // 如果傳入id名
            if (target.id === selector.substr(1)) callback(data);
        }
    });
}
delegation("click", "div", "body", function(data){
    console.log("click =>", data); // click => {test: 1}
}, {test: 1});

以上是簡單實現的委托函數，沒有處理各種瀏覽器兼容性問題。主要是為了簡單演示下綁定機制～

云服務器 GPU云服務器委托事件事件委托事件委托c javascript事件委托

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93301.html

淺談網頁基本性能優化規則小結

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

Aomine 2019-08-23 13:51 評論0 收藏0
淺談網頁基本性能優化規則小結

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

luffyZh 2019-06-28 16:52 評論0 收藏0
淺談網頁基本性能優化規則小結

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

CoderStudy 2019-07-30 18:37 評論0 收藏0
淺談Javascript事件委托（代理）

摘要：開玩笑啦，提供一種方法叫做事件委托。途中經過各個層次的，并在各上觸發捕獲事件，直到到達時間的目標。懂得了事件冒泡的過程，就很容易明白事件委托的運作原理。首先祝大家七夕快樂。。假如現在有一個的列表，里面可能會有若干個列表項。現在要為每一個列表項綁定相同的點擊事件，現在你可能會有這幾種做法：手動為每一個列表項綁定事件；在onload的時候，找到該列表，對其每一個子元素進行遍歷，循環...

yunhao 2019-08-21 10:38 評論0 收藏0