摘要：一事件流事件流描述的是從頁面中接受事件的順序。級事件處理程序級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作和。第二個方法是，它返回事件的目標。第三個方法是，用于取消事件的默認行為。首先嘗試使用方法阻止事件流，否則就使用屬性。

事件流描述的是從頁面中接受事件的順序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流

事件冒泡，即事件最開始由最具體的元素(文檔中嵌套層次最深的那個節(jié)點)接收，然后逐級向上轉(zhuǎn)播至最不具體的節(jié)點(文檔)。
如下圖所示，如果你點擊了按鈕，那么也認為你點擊了外面的div，最終會一直傳遞到document上，從小到大的傳播，就好比水里魚的冒泡，從小泡泡大道泡泡的過程。

事件捕獲跟事件冒泡恰好相反。它的思想是不太具體的節(jié)點應(yīng)該更早接收到事件，而最具體的節(jié)點最后接收到事件。

事件的三個階段分別是：捕獲階段、目標階段、冒泡階段

所謂的HTML事件是指把JS直接寫在HTML元素中，比如下面的代碼：
[程序1]

或者
[程序2]

那么HTML事件處理程序有一種很明顯的缺點：HTML與JS代碼緊密的耦合在一起，這不是這一種好的程序設(shè)計。

DOM0級別事件處理程序是一種比較傳統(tǒng)的，是指把一個行數(shù)賦值給一個事件處理程序的屬性，也是用的比較多的方式。
他的優(yōu)點是：簡單，而且具有夸瀏覽器的優(yōu)勢。
[程序3]

var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
     alert("這是通過DOM0級添加的事件！");
}

如果要需要這個事件，可以這樣寫：
[程序4]

btn2.onclick = null;

以上就是DOM0級事件處理方法。

DOM2級事件定義了兩個方法：用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。它們都接收三個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。
他的有點與DOM0級一樣，還可以添加多個事件處理程序。
[程序5]

但是，在IE8-的瀏覽器中無法運行，不支持addEventListener，IE有IE獨有的DOM2級事件處理程序。（IE11親測可以，IE9、10沒測試過）。

在IE中也提供了類似的兩個方法
attachEvent()添加事件
detachEvent()刪除事件
這兩個方法接收相同的兩個參數(shù)：事件處理程序名稱與事件處理函數(shù)
[程序6]

btn3.attachEvent("onclick",showMsg);

這這里又要給事件加上“on”，這與DOM2級事件處理程序想法。那么這就夸瀏覽器了。
那么怎么解決跨瀏覽器的問題？答案是，能力判斷，即你支持attachEvent()的能力就給你這個，你有別的能力你就你其他的能力。

我們封裝到一個對象
[程序7]

var eventUtil = {
    //添加句柄
    addHandle:function(element,type,handle){
        if (element.addEventListener) {
            element.addEventListener(type,handle,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handle);
        }else{
            element["on"+type] = handle;
        };
    },
    //刪除句柄
    removeHandle:function(element,type,handle){
        if (element.removeEventListener) {
            element.removeEventListener(type,handle,false);
        }else if(element.dettachEvent){
            element.dettachEvent("on"+type,handle);
        }else{
            element["on"+type] = null;
        };
    }
}
//調(diào)用
eventUtil.addHandle(btn3,"click",showMsg);

這樣一來，IE和Chrome都能很好的支持了。

事件對象event

(1)、type:獲取事件類型
[程序8]

function showMsg(event){
    alert(event.type);    //click
}

(2)、target：事件目標
[程序9]

function showMsg(event){
    alert(event.target.nodeName);    //input
}

(3)、stopPropagation() 阻止事件冒泡
我們已經(jīng)知道了事件冒泡的概念，那么，當我點擊按鈕的時候我就是點擊按鈕，不讓它再冒泡到div上了，那么我們可以在程序中加上
event.stopPropagation() 即可阻止事件的冒泡。
(4)、preventDefault() 阻止事件的默認行為
事件的默認行為，比如,跳轉(zhuǎn)，他的默認行為就是跳轉(zhuǎn)到某個鏈接，那么現(xiàn)在我們想要點擊它不讓它跳轉(zhuǎn)，去執(zhí)行我們給他的事件行為。那么可以這樣寫：
event.preventDefault()

(1)、type:獲取事件類型
(2)、srcElement：事件目標
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默認行為
[程序10]

    
    
    


    跳轉(zhuǎn)
    

雖然 DOM 和 IE 中的 event 對象不同，但基于它們之間的相似性依舊可以拿出跨瀏覽器的方案來。IE 中 event 對象的全部信息和方法 DOM 對象中都有，只不過實現(xiàn)方式不一樣。不過，這種對應(yīng)關(guān)系讓實現(xiàn)兩種事件模型之間的映射非常容易?？梢詫η懊娼榻B的 EventUtil 對象加以增強，添加如下方法以求同存異。

getEvent: function(event){
    return event ? event : window.event;
},
getTarget: function(event){
    return event.target || event.srcElement;
},
preventDefault: function(event){
   if (event.preventDefault){
       event.preventDefault();
   } else {
       event.returnValue = false;
   }
},
stopPropagation: function(event){
    if (event.stopPropagation){
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

第一個是 getEvent()，它返回對 event對象的引用，在兼容 DOM 的瀏覽器中， event 變量只是簡單地傳入和返回。而在 IE 中， event 參數(shù)是未定義的（undefined），因此就會返回 window.event。

第二個方法是 getTarget()，它返回事件的目標。在這個方法內(nèi)部，會檢測 event 對象的 target屬性，如果存在則返回該屬性的值；否則，返回 srcElement 屬性的值。

第三個方法是 preventDefault()，用于取消事件的默認行為。在傳入 event 對象后，這個方法會檢查是否存在preventDefault()方法，如果存在則調(diào)用該方法。如果 preventDefault()方法不存在，則將 returnValue 設(shè)置為 false。

第四個方法是 stopPropagation()，其實現(xiàn)方式類似。首先嘗試使用 DOM 方法阻止事件流，否則就使用 cancelBubble 屬性。