javaScript事件委托

一、概念理解：
1、事件：HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。比如點擊事件、鼠標移入/移出事件等。事件通常與函數配合使用，這樣就可以通過發生的事件來驅動函數執行。
2、DOM 事件流：冒泡事件流、捕獲事件流。
3、DOM 事件模型：捕獲、目標、冒泡。

那什么是事件委托呢？

事件委托：即是，一個事件本來是要綁定到某個元素上，然而卻綁定到了該元素的父（或祖先）元素上，利用事件冒泡原理，觸發執行效果。

 

二、事件委托的優點：

那為什么要使用事件委托？事件委托有什么好處，以及使用時要注意什么？

事件委托大概有兩個優點：
1、提高網頁性能。
2、通過事件委托添加的事件，對后期生成的元素依然有效。

上面提到的第二點如何理解呢？

舉個例子：現在頁面上有個 ul，ul 里有三個 li，通過循環給每個 li 添加點擊事件，發現三個 li 到可以正常觸發點擊事件了，然后通過 js 代碼在 ul 里插入（append）兩個 li，
再試着點擊所有 li，發現前面三個 li 正常觸發點擊事件，后面新添加的兩個 li 無法正常觸發點擊事件。

 

三、事件委托的使用方法：

使用上面 ul 的例子進行事件委托給每個 li 綁定事件，示例代碼：

var ul = document.querySelector("ul");

ul.onclick = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;

    if(target.nodeName.toLowerCase() === "li"){
        alert("li");
    }
}

 

從示例代碼中可以看出，要使用事件委托就要利用 event 對象。此處也能很容易的看出事件委托可以提高性能，因為本來需要對每個 li 都進行事件綁定，而現在只需要對 ul 進行事件綁定，減少了對DOM的操作。

 

四、事件委托怎么獲取元素下標（索引值）：

利用數組方法indexOf查詢當前li的下標：

var ul = document.querySelector("ul");

ul.onclick = function(e){
    var
    e = e || window.event,
    target = e.target || e.srcElement;

    if(target === li[i]){
       var
       li=this.querySelectorAll("li");
       index = Array.prototype.indexOf.call(li,target);
       alert("所點擊 li 的下標是：" + index);
    }
}    

 

上述代碼中，為什么需要 “index = Array.prototype.indexOf.call(li,target);” 這樣使用數組的indexOf方法呢，這是因為querySelectorAll方法獲取到的元素列表不是數組，和函數的arguments一樣是一種類數組類型，不可以直接使用數組的方法。

 

注意：事件代理可能帶來的隱患，當頁面非常復雜的情況下，非常容易引起混亂，特別是當多種（個）事件通過事件委托綁定到同一個元素上時。