JavaScript 事件代理和委托

littlelightss 發布于2019-08-22 10:39 / 1651人閱讀

摘要：原文地址事件代理和委托在中這個詞經常出現，看字面的意思，代理委托。模型將事件處理流程分為三個階段一事件捕獲階段，二事件目標階段，三事件起泡階段。事件目標當到達目標元素之后，執行目標元素該事件相應的處理函數。

原文地址：JavaScript 事件代理和委托

在javasript中delegate這個詞經常出現，看字面的意思，代理、委托。那么它究竟在什么樣的情況下使用？它的原理又是什么？在各種框架中，也經常能看到delegate相關的接口。這些接口又有什么特殊的用法呢？這篇文章就主要介紹一下javascript delegate的用法和原理，以及Dojo，jQuery等框架中delegate的接口。

JavaScript事件代理

首先介紹一下JavaScript的事件代理。事件代理在JS世界中一個非常有用也很有趣的功能。當我們需要對很多元素添加事件的時候，可以通過將事件添加到它們的父節點而將事件委托給父節點來觸發處理函數。這主要得益于瀏覽器的事件冒泡機制，后面會詳細介紹。下面我們具體舉個例子來解釋如何使用這個特性。這個例子主要取自David Walsh的相關文章（How JavaScript Event Delegation Works）。

假設有一個 UL 的父節點，包含了很多個 Li 的子節點：


  Item 1
  Item 2
  Item 3
  Item 4
  Item 5
  Item 6

當我們的鼠標移到Li上的時候，需要獲取此Li的相關信息并飄出懸浮窗以顯示詳細信息，或者當某個Li被點擊的時候需要觸發相應的處理事件。我們通常的寫法，是為每個Li都添加一些類似onMouseOver或者onClick之類的事件監聽。

function addListeners4Li(liNode){
    liNode.onclick = function clickHandler(){...};
    liNode.onmouseover = function mouseOverHandler(){...}
}

window.onload = function(){
    var ulNode = document.getElementById("parent-list");
    var liNodes = ulNode.getElementByTagName("Li");
    for(var i=0, l = liNodes.length; i < l; i++){
        addListeners4Li(liNodes[i]);
    }   
}

如果這個UL中的Li子元素會頻繁地添加或者刪除，我們就需要在每次添加Li的時候都調用這個addListeners4Li方法來為每個Li節點添加事件處理函數。這就添加的復雜度和出錯的可能性。

更簡單的方法是使用事件代理機制，當事件被拋到更上層的父節點的時候，我們通過檢查事件的目標對象（target）來判斷并獲取事件源Li。下面的代碼可以完成我們想要的效果：

// 獲取父節點，并為它添加一個click事件
document.getElementById("parent-list").addEventListener("click",function(e) {
  // 檢查事件源e.targe是否為Li
  if(e.target && e.target.nodeName.toUpperCase == "LI") {
    // 真正的處理過程在這里
    console.log("List item ",e.target.id.replace("post-")," was clicked!");
  }
});

為父節點添加一個click事件，當子節點被點擊的時候，click事件會從子節點開始向上冒泡。父節點捕獲到事件之后，通過判斷e.target.nodeName來判斷是否為我們需要處理的節點。并且通過e.target拿到了被點擊的Li節點。從而可以獲取到相應的信息，并作處理。

事件冒泡及捕獲

之前的介紹中已經說到了瀏覽器的事件冒泡機制。這里再詳細介紹一下瀏覽器處理DOM事件的過程。對于事件的捕獲和處理，不同的瀏覽器廠商有不同的處理機制，這里我們主要介紹W3C對DOM2.0定義的標準事件。

DOM2.0模型將事件處理流程分為三個階段：一、事件捕獲階段，二、事件目標階段，三、事件起泡階段。如圖：

事件捕獲：當某個元素觸發某個事件（如onclick），頂層對象document就會發出一個事件流，隨著DOM樹的節點向目標元素節點流去，直到到達事件真正發生的目標元素。在這個過程中，事件相應的監聽函數是不會被觸發的。

事件目標：當到達目標元素之后，執行目標元素該事件相應的處理函數。如果沒有綁定監聽函數，那就不執行。

事件起泡：從目標元素開始，往頂層元素傳播。途中如果有節點綁定了相應的事件處理函數，這些函數都會被一次觸發。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。

jQuery和Dojo中delegate函數

下面看一下Dojo和jQuery中提供的事件代理接口的使用方法。

$("#link-list").delegate("a", "click", function(){
  // "$(this)" is the node that was clicked
  console.log("you clicked a link!",$(this));
});

jQuery的delegate的方法需要三個參數，一個選擇器，一個時間名稱，和事件處理函數。

而Dojo的與jQuery相似，僅是兩者的編程風格上的差別：

require(["dojo/query","dojox/NodeList/delegate"], function(query,delegate){

    query("#link-list").delegate("a","onclick",function(event) {
    // "this.node" is the node that was clicked
    console.log("you clicked a link!",this);
  });
})

Dojo的delegate模塊在dojox.NodeList中，提供的接口與jQuery一樣，參數也相同。

優點
通過上面的介紹，大家應該能夠體會到使用事件委托對于web應用程序帶來的幾個優點：

1.管理的函數變少了。不需要為每個元素都添加監聽函數。對于同一個父節點下面類似的子元素，可以通過委托給父元素的監聽函數來處理事件。

2.可以方便地動態添加和修改元素，不需要因為元素的改動而修改事件綁定。

3.JavaScript和DOM節點之間的關聯變少了，這樣也就減少了因循環引用而帶來的內存泄漏發生的概率。

寫到這里，突然想起了之前對于Dojo DataGrid的困惑：那么多的rows和cells，如何處理他們事件之間的關系。現在想想，使用委托就很簡單了。所有的事件委托到grid最外層的節點上，當事件發生的時候通過一些方法來獲取和添加事件的額外屬性，如rowIndex, cellIndex，之后在分配到onRowClick,onCellClick之類的處理函數上。

在JavaScript編程中使用代理

上面介紹的是對DOM事件處理時，利用瀏覽器冒泡機制為DOM元素添加事件代理。其實在純JS編程中，我們也可以使用這樣的編程模式，來創建代理對象來操作目標對象。這里引用司徒正美相關文章中的一個例子：

  var delegate = function(client, clientMethod) {
        return function() {
            return clientMethod.apply(client, arguments);
        }
    }
    var ClassA = function() {
        var _color = "red";
        return {
            getColor: function() {
                console.log("Color: " + _color);
            },
            setColor: function(color) {
                _color = color;
            }
        };
    };

    var a = new ClassA();
    a.getColor();
    a.setColor("green");
    a.getColor();
    console.log("執行代理！");
    var d = delegate(a, a.setColor);
    d("blue");
    console.log("執行完畢！");
    a.getColor();

上面的例子中，通過調用delegate()函數創建的代理函數d來操作對a的修改。這種方式盡管是使用了apply（call也可以）來實現了調用對象的轉移，但是從編程模式上實現了對某些對象的隱藏，可以保護這些對象不被隨便訪問和修改。

在很多框架中都引用了委托這個概念用來指定方法的運行作用域。比較典型的如dojo.hitch(scope,method)和ExtJS的createDelegate(obj,args)。有興趣的同學可以看一下他們的源代碼，主要也是js函數的apply方法來制定執行作用域。

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

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

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

JavaScript事件代理和委托

摘要：我們通過上面的這個函數來給節點設置監聽，可以通過將設置成來為事件的捕獲階段添加監聽回調函數。目標階段當事件到達目標節點時，事件就進入了目標階段。事件冒泡讓我們可以在這個或者更上層的元素上監聽事件，并且時間傳播過程中觸發回調函數。在JavaScript中，經常會碰到要監聽列表中多項li的情形，假設我們有一個列表如下： item1 item2 item3 item...

Nino 2019-08-21 10:27 評論0 收藏0
js 事件委托事件代理

摘要：事件委托事件代理高級程序設計上解釋事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。事件委托原理事件委托是利用事件的冒泡原理來實現的，事件冒泡就是事件從最深的節點開始，然后逐級向上傳播事件。 js 事件委托事件代理 JavaScript高級程序設計上解釋：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。通過例子類比：有...

widuu 2019-08-23 14:44 評論0 收藏0
淺談Javascript事件委托（代理）

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

yunhao 2019-08-21 10:38 評論0 收藏0
js的事件的代理和委托

摘要：本文要解釋一下事件的代理或者說委托的概念，首先直接上定義事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。這種委托父元素執行事件，并利用事件冒泡的原理執行子元素相應函數的方法就叫事件的代理，或者叫事件的委托。本文要解釋一下JavaScript事件的代理或者說委托的概念，首先直接上定義：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的...

lewif 2019-08-20 14:19 評論0 收藏0
javascript事件基礎知識

摘要：可選，布爾值，指定事件是否在捕獲或冒泡階段執行，默認冒泡。適用范圍參數介紹必須，字符串，事件名稱。必須，指定事件觸發時執行的函數。事件冒泡事件冒泡與事件捕獲恰恰相反，事件冒泡順序是由內到外進行事件傳播，直到根節點。什么是事件 javascript與HTML之間交互就是通過事件實現的，事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。事件在瀏覽器中是以對象的形式存在的，即event，...

ad6623 2019-08-26 13:36 評論0 收藏0