什麼是事件流：

   事件流描述的是從頁面中接受事件的順序，但有意思的是，微軟（IE）和網景（Netscape）開發團隊居然提出了兩個截然相反的事件流概念，

IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕獲流(event capturing)。

第一種：事件冒泡

    　　　IE提出的事件流叫做事件冒泡，即事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的節點

第二種：事件捕獲

         網景公司提出的事件流叫事件捕獲流。

          事件捕獲流的思想是不太具體的DOM節點應該更早接收到事件，而最具體的節點應該最後接收到事件

DOM事件流

"DOM2級事件”規定的事件流包含三個階段：事件捕獲階段，處於目標階段和事件冒泡階段。首先發生的是事件捕獲，然後是實際的目標接收到事件，

最後階段是冒泡階段。以上面的HTML頁面為例，單擊<div>元素將按照下圖觸發事件：

<script type="text/javascript">
var div=document.getElementById("myDiv");
div.onclick=function(event){
alert("div");
};
document.body.addEventListener("click",function(event){
alert("event bubble");
},false);
document.body.addEventListener("click",function(event){
alert("event catch");
},true);

</script>

以上是DOM2級別 使用addEventListener新增事件

DOM0級事件處理程式

 通過Javascript指定事件處理程式的傳統方式，所有瀏覽器均支援。每個元素（包括window，document）都有自己的事件處理程式屬性，

但是必須在DOM節點載入完之後才會有效。如下所示

<script type="text/javascript">
        var div = document.getElementById("myDiv");
        div.onclick = function(event) {
            alert(this.id);
        };
    </script>

刪除通過DOM0級方法指定的事件處理程式：div.onclick=null;


補充：HTML事件處理程式、DOM0級事件處理程式和IE事件處理程式均以“on”開頭，DOM2級事件處理程式不需要加“on”。

IE9，chrome，Firefox，Opera，Safari均實現了DOM2級事件處理程式，繫結事件方法addEventListener()接收三個引數：
事件名稱，事件處理函式和一個布林值。布林值為true，
則表示在捕獲階段呼叫事件處理程式；如果為false，則表示在冒泡階段呼叫事件處理程式。
addEventListener允許在同一個元素上新增多個事件處理程式

 

IE事件處理程式

IE8和IE8以下的版本不支援addEventListener()，而是採用attachEvent()來實現事件繫結。

目前只有IE和Opera支援attachEvent()。IE9支援addEventListener()，同時也相容IE8的attachEvent()方法，但是IE9和IE8對attachEvent()的實現有點不同。

總結：attachEvent()採用冒泡方式，而addEventListener()可以採用冒泡或事件捕獲方式。