該文章已轉移到博客：https://cynthia0329.github.io/
1.執行的順序不一樣
冒泡型事件模型： button->div->body (IE事件流)
捕獲型事件模型： body->div->button (Netscape事件流)
DOM事件模型： body->div->button->button->div->body (先捕獲后冒泡)
2.事件偵聽函數的區別
IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //綁定函數
[Object].detachEvent("name_of_event_handler", fnHandler); //移除綁定
DOM使用：
[Object].addEventListener("name_of_event", fnHandler, bCapture); //綁定函數
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除綁定
3、參數不一樣和this指向不一樣
IE下注冊多個事件監聽器與移除監聽器方法
注冊多個事件監聽器
element.attachEvent('onclick', observer);
attachEvent接受兩個參數。
第一個參數是事件名稱
第二個參數observer是回調處理函數。
這里得說明一下，有個經常會出錯的地方，IE下利用attachEvent注冊的處理函數調用時this指向不再是先前注冊事件的元素，這時的this為window對象了，筆者很奇怪IE為什么要這么做，完全看不出好處所在。
移除先前注冊的事件的監聽器
element.detachEvent('onclick', observer);
DOM標准下注冊多個事件監聽器與移除監聽器方法
注冊多個事件監聽器
實現DOM標准的瀏覽器與IE瀏覽器中注冊元素事件監聽器方式有所不同，它通過元素的addEventListener方法注冊，該方法既支持注冊冒泡型事件處理，又支持捕獲型事件處理。
element.addEventListener('click', observer, useCapture);
addEventListener方法接受三個參數。
第一個參數是事件名稱，值得注意的是，這里事件名稱與IE的不同，事件名稱是沒’on’開頭的;
第二個參數observer是回調處理函數;
第三個參數注明該處理回調函數是在事件傳遞過程中的捕獲階段被調用還是冒泡階段被調用
它可以在一個DOM元素上綁定多個事件處理器，並且在處理函數內部，this關鍵字仍然指向被綁定的DOM元素，另外處理函數參數列表的第一個位置傳遞事件event對象。
移除先前注冊的事件的監聽器
element.removeEventListener('click', observer, useCapture);
參考：
https://www.cnblogs.com/nikiguo/p/8522317.html