事件委托

worldligang 發(fā)布于2019-08-01 16:16 / 2171人閱讀

摘要：當(dāng)有事件觸發(fā)監(jiān)聽器時，檢查事件的來源，排除非子元素事件。當(dāng)要觸發(fā)事件的標(biāo)簽里面還有其他標(biāo)簽時，不能正常的委托，因為或是里面的標(biāo)簽元素。

背景

在JS中，添加到頁面上的事件處理程序都會占用內(nèi)存，內(nèi)存占用的越多性能就越差，且必須事先就指定好所有的事件處理程序而導(dǎo)致的DOM訪問次數(shù)的增加會延遲整個頁面的交互就緒時間。特別是對table的td和ul的li的事件處理，如果是給大量子元素添加事件，會占用大量內(nèi)存。事件處理程序綁定的越多越影響性能，但是又不能說不綁定事件，所以我們需要一種方法來減少綁定的事件，使用事件委托。

原理

在觸發(fā)DOM上的某個事件的時候，就會產(chǎn)生一個事件對象event，這個對象中包含著所有與事件有關(guān)的信息，其中包括導(dǎo)致事件的元素、事件的類型以及其他與特定事件相關(guān)的信息。避免對特定的每個節(jié)點(diǎn)添加事件監(jiān)聽器；相反，事件監(jiān)聽器是被添加到它們的父元素上。事件監(jiān)聽器會分析從子元素冒泡上來的事件，找到是哪個子元素的事件。

使用

假定我們有一個UL元素，它有幾個子元素：


    Item 1
    Item 2
    Item 3
    Item 4
    Item 5

假設(shè)，需要觸發(fā)每個li來改變他們的背景顏色，你可以給每個獨(dú)立的li元素添加事件監(jiān)聽器。

window.onload = function(){
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");

    for(var i=0; i
但有時這些li元素可能會被刪除，可能會有新增，監(jiān)聽它們的新增或刪除事件將會是一場噩夢，尤其是當(dāng)你的監(jiān)聽事件的代碼放在應(yīng)用的另一個地方時。但是，如果你將監(jiān)聽器安放到它們的父元素上呢？你如何能知道是那個子元素？
簡單：當(dāng)子元素的事件冒泡到父ul元素時，你可以檢查事件對象的target屬性，捕獲真正節(jié)點(diǎn)元素的引用。
第一步是給父元素添加事件監(jiān)聽器。當(dāng)有事件觸發(fā)監(jiān)聽器時，檢查事件的來源，排除非li子元素事件。如果是一個li元素，我們就找到了目標(biāo)！如果不是一個li元素，事件將被忽略。
window.onload = function(){
    var oUl = document.getElementById("ul");
    var aLi = oUl.getElementsByTagName("li");

/*
這里要用到事件源：event 對象，事件源，不管在哪個事件中，只要你操作的那個元素就是事件源。
ie：window.event.srcElement
標(biāo)準(zhǔn)下:event.target
nodeName:找到元素的標(biāo)簽名
*/
    oUl.onmouseover = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        //alert(target.innerHTML);
        if(target.nodeName.toLowerCase() == "li"){
        target.style.background = "red";
        }
    }
    oUl.onmouseout = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        //alert(target.innerHTML);
        if(target.nodeName.toLowerCase() == "li"){
        target.style.background = "";
        }
    }
}

總結(jié)
委托（代理）事件是那些被綁定到父級元素的事件，但是只有當(dāng)滿足一定匹配條件時才會被挪。這是靠事件的冒泡機(jī)制來實現(xiàn)的。
優(yōu)點(diǎn)：

可以大量節(jié)省內(nèi)存占用，減少事件注冊，比如在table上代理所有td的click事件就非常棒

可以實現(xiàn)當(dāng)新增子對象時無需再次對其綁定事件，對于動態(tài)內(nèi)容部分尤為合適


缺點(diǎn)：
事件代理的應(yīng)用常用應(yīng)該僅限于上述需求下，如果把所有事件都用代理就可能會出現(xiàn)事件誤判，即本不應(yīng)用觸發(fā)事件的被綁上了事件。當(dāng)要觸發(fā)事件的標(biāo)簽里面還有其他標(biāo)簽時，不能正常的委托，因為target或srcElemt是里面的標(biāo)簽元素。

參考文章
http://www.webhek.com/event-d...
http://blog.csdn.net/jinboker...
http://blog.csdn.net/leo8729/...