事件委托

aristark 發布于2019-08-20 14:11 / 2756人閱讀

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

背景

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

原理

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

使用

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


    Item 1
    Item 2
    Item 3
    Item 4
    Item 5

假設，需要觸發每個li來改變他們的背景顏色，你可以給每個獨立的li元素添加事件監聽器。

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

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

/*
這里要用到事件源：event 對象，事件源，不管在哪個事件中，只要你操作的那個元素就是事件源。
ie：window.event.srcElement
標準下:event.target
nodeName:找到元素的標簽名
*/
    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 = "";
        }
    }
}

總結
委托（代理）事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。這是靠事件的冒泡機制來實現的。
優點：

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

可以實現當新增子對象時無需再次對其綁定事件，對于動態內容部分尤為合適


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

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

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

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

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

jQuery源碼解析之你并不真的懂事件委托及target和currenttarget的區別

摘要：源碼源碼行被點擊了點擊了，即委托的事件被點擊了優先添加委托，再添加其他即委托在上的事件數量在下標為的位置插入委托事件解析可以看到，是優先添加委托事件，再添加自身事件，觸發事件的時候也是按這個順序。 showImg(https://segmentfault.com/img/remote/1460000019419722); 前言：請先回顧下我之前寫的一篇文章：JavaScript之事件委...

khs1994 2019-08-23 18:01 評論0 收藏0
簡單說 JavaScript中的事件委托（上）

摘要：說明這篇文章說中的事件委托，這次先說一些比較基本的知識。第一段綁定了兩次事件，第二段綁定了一次事件也就是說，原來在上綁定的事件，現在委托在了父元素上，而在上只需要綁定一次就可以了。我們用事件委托的方式，再來改改。說明這篇文章說JavaScript中的事件委托，這次先說一些比較基本的知識。事件委托是什么先來看看事件委托的概念事件委托就是利用事件冒泡，只指定一個事件處理程序，就...

fireflow 2019-08-29 14:07 評論0 收藏0
簡單說 JavaScript中的事件委托（上）

摘要：說明這篇文章說中的事件委托，這次先說一些比較基本的知識。第一段綁定了兩次事件，第二段綁定了一次事件也就是說，原來在上綁定的事件，現在委托在了父元素上，而在上只需要綁定一次就可以了。我們用事件委托的方式，再來改改。說明這篇文章說JavaScript中的事件委托，這次先說一些比較基本的知識。事件委托是什么先來看看事件委托的概念事件委托就是利用事件冒泡，只指定一個事件處理程序，就...

SexySix 2019-08-21 18:29 評論0 收藏0
好文推薦：javascript: 事件委托解析

摘要：前言之前不太明白事件委托。看了這個帖子，跟著代碼操作了一遍，終于明白了事件委托。推薦理由一步一步，漸進式分析來說明事件委托。為簽收快遞，有兩種辦法一是三個人在公司門口等快遞二是委托給前臺代為簽收。前言：之前不太明白事件委托。看了這個帖子，跟著代碼操作了一遍，終于明白了事件委托。所以轉載。推薦理由：一步一步，漸進式分析來說明事件委托。什么叫事件委托呢？它還有一個名字叫事件代理 ...

Wuv1Up 2019-08-21 17:35 評論0 收藏0