強大的js事件委托

什麼是事件

可以這樣認為，我們在網頁中的某個操作就是事件(有的操作對應多個事件)，例如:當我們點選一個按鈕的時候，就觸發了onclick事件

比如onload事件等等

下邊是一個簡單添加點選事件的例子

element.addEventListener("click", function() {
       //操作
});
           

addEventListener() 方法用于向指定元素添加事件句柄，使用 removeEventListener() 方法來移除 addEventListener() 方法添加的事件句柄。含有三個參數，一個是事件名稱，另一個是事件執行的函數，最後一個是事件捕獲，因為IE不支援此方法是以，IE 中為 attachEvent（）

最簡單的添加事件的方法是：

element.onclick = function() {
   // 操作
};
           

事件冒泡和事件捕獲

事件冒泡

事件按照從最特定的事件目标到最不特定的事件目标(document對象)的順序觸發。

IE 5.5: div -> body -> document

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

事件從事件目标(target)開始，往上冒泡直到頁面的最上一級标簽。

事件捕獲

事件從最不精确的對象(document 對象)開始觸發，然後到最精确，和事件冒泡相反，事件從最上一級标簽開始往下查找，直到捕獲到事件目标(target)。

事件流

同時支援兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結束。

事件委托

事件委托就是利用冒泡的原理，把事件加到父級上，觸發執行效果。用事件委托可以提高性能

使用事件委托技術能讓你避免對特定的每個節點添加事件監聽器；相反，事件監聽器是被添加到它們的父元素上。事件監聽器會分析從子元素冒泡上來的事件，找到是哪個子元素的事件。

假設我們給ul元素裡的li添加事件

<ul id="parent-list">
    <li id="post-1">Item 1</li>
    <li id="post-2">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
    <li id="post-5">Item 5</li>
    <li id="post-6">Item 6</li>
</ul>
           

當li被點選的時候，我們要精确的知道是哪個li點選的，在不會事件委托的時候我們可能根據每個li的id去擷取對象然後綁定事件，然而每當添加新的li的時候，又得重新給添加的綁定事件，顯得非常麻煩

下面是事件委托的例子

// 找到父元素，添加監聽器...
    document.getElementById("parent-list").addEventListener("click",function(e) {
    // e.target是被點選的元素!
    // 如果被點選的是li元素
    if(e.target && e.target.nodeName == "LI") {
        // 找到目标，輸出
        console.log("List item ",e.target);
    }
})
           

我們先擷取父元素對象，然後給父元素綁定事件，當事件監聽器觸發時，檢查事件的來源，排除了不是li元素的事件，如果點選的是li元素，則輸出此元素的對象，這短短幾行代碼，比一個個添加事件靈活多了，是以事件委托非常強大，希望大家多多使用。