摘要：事件事件指可以被偵測到的行為。事件通常與函數配合使用，當事件發生時函數才會執行。兩家公司對于事件流出現了截然相反的定義。級事件規定的事件流包括三個階段事件捕獲階段處于目標階段事件冒泡階段。我們又把事件處理程序稱為事件偵聽器。

首先在介紹DOM事件之前我們先來認識下DOM的不同級別。針對不同級別的DOM，我們的DOM事件處理方式也是不一樣的。
DOM級別一共可以分為4個級別：DOM0級，DOM1級，DOM2級和DOM3級，
而DOM事件分為3個級別：DOM0級事件處理，DOM2級事件處理和DOM3級事件處理。

如下圖所示：

其中1級DOM標準中并沒有定義事件相關的內容，所以沒有所謂的1級DOM事件模型。

事件指可以被 JavaScript 偵測到的行為。即鼠標點擊、頁面或圖像載入、鼠標懸浮于頁面的某個熱點之上、在表單中選取輸入框、確認表單、鍵盤按鍵等操作。事件通常與函數配合使用，當事件發生時函數才會執行。
事件名稱：click/mouseover/blur("不帶on")
響應某個事件的函數就是事件處理程序(事件偵聽器)。
事件處理程序函數名稱：onclick/onmouseove/onblur

例子代碼--點擊事件觸發alert函數

更多事件類別請參考w3c中關于事件的詳細類別。
JavaScript 事件
JavaScript 事件參考手冊

事件流指從頁面中接收事件的順序,也可理解為事件在頁面中傳播的順序。

一點背景：
早期的IE事件傳播方向為由上至下，即從document逐級向下傳播到目標元素；
而Netscape公司的Netscape Navigator則是朝相反的方向傳播，也就是從目標元素開始向上逐級傳播最終至window。 兩家公司對于事件流出現了截然相反的定義。

后來ECMAScript在DOM2中對事件流進行了進一步規范，基本上就是上述二者的結合。
當事件發生時，最先得到通知的是window，然后是document，由上至下逐級依次而入，直到真正觸發事件的那個元素(目標元素)為止，這個過程就是捕獲。
接下來，事件會從目標元素開始起泡，由下至上逐級依次傳播，直到window對象為止，這個過程就是冒泡。
所以捕獲比冒泡先執行。
其中DOM3級事件在DOM2的基礎之上添加了更多的事件類型。

DOM2級事件規定的事件流包括三個階段：
（1）事件捕獲階段（2）處于目標階段（3）事件冒泡階段。
下面圖片來自：https://www.w3.org/TR/DOM-Lev...

我們寫一個例子：如下圖，中間白色區域的盒子分別為box1,box2...box6,包含控制按鈕設置我們的事件

    

        
點擊按鈕設置類型后再點擊中心
        設置捕獲
        設置冒泡
        設置捕獲和冒泡
        動畫完成后再清除設置
    
    

        

            

                

                    

                        

                            點擊

                        
                    
                
            
        
    

大概流程圖如下：

演示效果如圖：

例子源碼
參考鏈接————小俠同學

前面我們已經說到了，事件處理程序就是響應某個事件的函數，簡單地來說，就是函數。我們又把事件處理程序稱為事件偵聽器。事件處理程序是以"on"開頭的，比如點擊事件的處理程序是"onclick",事件處理程序大概有以下5種。

1.HTML事件處理程序

2.DOM0級事件處理程序

3.DOM2級事件處理程序

4.IE事件處理程序

5.跨瀏覽器的事件處理程序

像我們的第一個例子，就是HTML事件處理程序，它是寫在html里面的，是全局作用域：

例子代碼--點擊事件觸發alert函數

當我們需要使用一個復雜的函數時，將js代碼寫在這里面，顯然很不合適，所以有了下面這種寫法：

例子代碼--點擊事件觸發doSomething()函數，這個函數寫在多帶帶的js文件或

可以看到button.onclick這種形式，這里事件處理程序作為了btn對象的方法，是局部作用域。
所以我們可以用

btn.onclick = null;來刪除指定的事件處理程序。

如果我們嘗試給事件添加兩個事件，如：

點擊
 

輸出，hello again，很明顯，第一個事件函數被第二個事件函數給覆蓋掉了，所以，DOM0級事件處理程序不能添加多個，也不能控制事件流到底是捕獲還是冒泡。

進一步規范之后，有了DOM2級事件處理程序，其中定義了兩個方法：
addEventListener() ---添加事件偵聽器
removeEventListener() ---刪除事件偵聽器
具體用法看
1.https://developer.mozilla.org...
2.https://developer.mozilla.org...
函數均有3個參數，
第一個參數是要處理的事件名(不帶on前綴的才是事件名)
第二個參數是作為事件處理程序的函數
第三個參數是一個boolean值，默認false表示使用冒泡機制，true表示捕獲機制。

點擊
 

這時候兩個事件處理程序都能夠成功觸發，說明可以綁定多個事件處理程序，但是注意，如果定義了一摸一樣時監聽方法，是會發生覆蓋的，即同樣的事件和事件流機制下相同方法只會觸發一次，比如：

點擊
 

removeEventListener()的方法幾乎和添加時用法一摸一樣：

點擊
 

這樣的話，事件處理程序只會執行一次。
但是要注意，如果同一個監聽事件分別為“事件捕獲”和“事件冒泡”注冊了一次，一共兩次，這兩次事件需要分別移除。兩者不會互相干擾。
這時候的this指向該元素的引用。
這里事件觸發的順序是添加的順序。

對于 Internet Explorer 來說，在IE 9之前，你必須使用 attachEvent 而不是使用標準方法 addEventListener。
IE事件處理程序中有類似與DOM2級事件處理程序的兩個方法：
1.attachEvent()
2.detachEvent()
它們都接收兩個參數：
1.事件處理程序名稱。如onclick、onmouseover，注意：這里不是事件，而是事件處理程序的名稱，所以有on。
2.事件處理程序函數。
之所以沒有和DOM2級事件處理程序中類似的第三個參數，是因為IE8及更早版本只支持冒泡事件流。
removeEventListener()的方法幾乎和添加時用法一摸一樣：

點擊
 

這里事件觸發的順序不是添加的順序而是添加順序的相反順序。
使用 attachEvent 方法有個缺點，this 的值會變成 window 對象的引用而不是觸發事件的元素。

為了兼容IE瀏覽器和標準的瀏覽器，我們需要編寫通用的方法來處理：
var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    removeHandler: function (element, type, handler) {
        if (element.removeEventListener()) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }
};

這一部分需要創建兩個方法：
addHandler() --這個方法職責是視情況來使用DOM0級、DOM2級、IE事件處理程序來添加事件。
removeHandler()--這個方法就是移除使用addHandler添加的事件。
這兩個方法接收相同的三個參數：
1.要操作的元素--通過dom方法獲取
2.事件名稱--注意：沒有on，如"click"、"mouseover"
3.事件處理程序函數--對應的函數

使用：

點擊
 

事件對象是用來記錄一些事件發生時的相關信息的對象，但事件對象只有事件發生時才會產生，并且只能是事件處理函數內部訪問，在所有事件處理函數運行結束后，事件對象就被銷毀！

屬性和方法如圖，詳細請查看以下鏈接：
1.HTML DOM Event 對象：http://www.w3school.com.cn/js...
2.詳細介紹請查看：http://www.jb51.net/article/9...

下面是一個例子：

點擊
 

在這個例子里，我們用到了currentTarget、eventPhase 屬性。

Event對象主要有以下兩個方法，用于處理事件的傳播（冒泡、捕獲）和事件的取消。
stopPropagation()——冒泡機制下，阻止事件的進一步往上冒泡

    var btn1=document.getElementById("btn1");
    var content=document.getElementById("content");
    btn1.addEventListener("click",function(event){
        alert("btn1");
        event.stopPropagation();
    },false);
    content.addEventListener("click",function(){
        alert("content");
    },false);
    //這里會輸出btn1，阻止了向content的冒泡

preventDefault()——用于取消事件的默認操作,比如鏈接的跳轉或者表單的提交，主要是用來阻止標簽的默認行為

禁止跳轉
var go = document.getElementById("go");
function goFn(event) {
 event.preventDefault();
// 不會跳轉
}
go.addEventListener("click", goFn, false);

當然，事件對象也存在一定的兼容性問題，在IE8及以前本版之中，通過設置屬性注冊事件處理程序時，調用的時候并未傳遞事件對象，需要通過全局對象window.event來獲取。解決方法如下：

function getEvent(event) {
 event = event || window.event;
}

在IE瀏覽器上面是event事件是沒有preventDefault()這個屬性的，所以在IE上，我們需要設置的屬性是returnValue

window.event.returnValue=false

stopPropagation()也是，所以需要設置cancelBubble，cancelBubble是IE事件對象的一個屬性，設置這個屬性為true能阻止事件進一步傳播。

event.cancelBubble=true

事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。

例子說明，我們為ul添加新的li，其中對li標簽元素綁定了click事件，但是發現，后增加的元素沒有辦法觸發我們的click事件。

    添加
    

        
1
        
2
        
3
    
    

這是因為如果事件涉及到更新HTML節點或者添加HTML節點時，新添加的節點無法綁定事件，更新的節點也是無法綁定事件，表現的行為是無法觸發事件。
其中一種解決方法是，添加子節點的時候，再次為其添加監聽事件

    添加
    

        
1
        
2
        
3
    
    

這也是問題所在：
　1.首先我們多次操作DOM獲取元素，這樣勢必會降低瀏覽器處理性能
　2.事件不具有繼承性，如果我們動態在頁面中添加了一個元素，那么還需要重新走一遍上述程序為其添加監聽事件

那么有沒有更好的方法呢？根據事件的冒泡原理，我們還可以實現另外一個很重要的功能：事件委托。

我們只監聽最外層的元素，然后在事件函數中根據事件來源進行不同的事件處理。這樣，我們添加事件監聽時只需要操作一個元素，極大的降低了DOM訪問，并且不用再給新增的元素添加監聽事件了，因為元素的事件會冒泡到最外層，被我們截獲。

    添加
    

        
1
        
2
        
3
    
    

這里用父級ul做事件處理，當li被點擊時，由于冒泡原理，事件就會冒泡到ul上，因為ul上有點擊事件，所以事件就會觸發，當然，這里當點擊ul的時候，也是會觸發的，所以要判斷點擊的對象到底是不是li標簽元素。

Event對象提供了一個屬性叫target，可以返回事件的目標節點，我們成為事件源，也就是說，target就可以表示為當前的事件操作的dom，但是不是真正操作dom，當然，這個是有兼容性的，標準瀏覽器用ev.target，IE瀏覽器用event.srcElement，此時只是獲取了當前節點的位置，并不知道是什么節點名稱，這里我們用nodeName來獲取具體是什么標簽名，這個返回的是一個大寫的，我們需要轉成小寫再做比較（習慣問題）。

這樣，我們就實現了我們的事件委托，當然，不是所有的事件都是可以委托的。
適合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

當用事件委托的時候，根本就不需要去遍歷元素的子節點，只需要給父級元素添加事件就好了，新增加的節點也可以觸發事件效果。

參考：
1.http://www.cnblogs.com/souven...
2.https://www.cnblogs.com/st-le...
3.https://segmentfault.com/a/11...
4.http://www.jb51.net/article/9...
5.http://www.w3school.com.cn/js...
6.http://www.jb51.net/article/8...
7.http://www.jb51.net/article/9...