什麼是事件

可以這樣認為，我們在網頁中的某個操作就是事件(有的操作對應多個事件)，例如:當我們點選一個按鈕的時候，就觸發了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元素，則輸出此元素的物件，這短短几行程式碼，比一個個新增事件靈活多了，所以事件委託非常強大，希望大家多多使用。