基本概念：DOM事件的級(jí)別

DOM0：element.onclick=function(){}
DOM1：(沒(méi)有設(shè)計(jì)和事件相關(guān)的東西)
DOM2：element.addEventListener('click',function(){},false)
DOM3：element.addEventListener('keyup',function(){},false)

DOM事件模型

指的就是冒泡或捕獲

DOM事件流

事件流含義，如 ：點(diǎn)擊鼠標(biāo)的事件如何傳遞到頁(yè)面上，這就是事件流。
完整事件流三個(gè)階段：捕獲、目標(biāo)階段、冒泡

描述DOM事件捕獲的具體流程

捕獲：window->document->html->body->....->目標(biāo)元素
冒泡：與捕獲相反

Event對(duì)象的常見(jiàn)應(yīng)用

• event.preventDefault()
  阻止默認(rèn)行為
• event.stopPropagation()
  阻止冒泡行為
• event.stopImmediatePropagation()
  事件響應(yīng)優(yōu)先級(jí)如，
  一個(gè)按鈕，同時(shí)注冊(cè)了兩個(gè)click事件A和B，如果想在A執(zhí)行的時(shí)候不執(zhí)行B，則在A事件的函數(shù)里加上event.stopImmediatePropagation()就會(huì)阻止B的執(zhí)行
• event.currentTarget & event.target
  currentTarget始終是監(jiān)聽(tīng)事件者，而target是事件的真正發(fā)出者

自定義事件

var event = new Event('custom')
DOM.addEventListener('custom',function(){
  console.log('custom')
})
DOM.dispatchEvent(event)

兼容性：

在 IE 中使用 attachEvent()與使用 DOM0 級(jí)方法的主要區(qū)別在于事件處理程序的作用域。在使 用 DOM0 級(jí)方法的情況下，事件處理程序會(huì)在其所屬元素的作用域內(nèi)運(yùn)行;在使用 attachEvent()方 法的情況下，事件處理程序會(huì)在全局作用域中運(yùn)行，因此 this 等于 window。來(lái)看下面的例子。

var btn = document.getElementById("myBtn");
  btn.attachEvent("onclick", function(){
    alert(this === window); //true
});

在編寫(xiě)跨瀏覽器的代碼時(shí)，牢記這一區(qū)別非常重要。

//兼容DOM0級(jí)方法、DOM2級(jí)方法和IE方法
var EventUtil = {
    addHandler: function(element, type, handler){
        if (element.addEventListener){  //DOM2
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){  //IE 了在 IE8 及更早版本中運(yùn)行，此時(shí)的事件類型必須加上"on"前綴
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;  //DOM0
        }
    },
    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()和 removeHandler()沒(méi)有考慮到所有的瀏覽器問(wèn)題，例如在 IE 中的作用域問(wèn)題。不過(guò)，使用它們添加和移除事件處理程序還是足夠了。此外還要注意，DOM0 級(jí)對(duì)每個(gè)事件只支持一 個(gè)事件處理程序。好在，只支持 DOM0 級(jí)的瀏覽器已經(jīng)沒(méi)有那么多了，因此這對(duì)你而言應(yīng)該不是什么 問(wèn)題。