每個元素都有自己的事件處理程序?qū)傩?，這些屬性的名字與事件處理程序的名字相同，如onclick。

var btn = document.getElementById("myBtn");
//為按鈕指定onclick事件處理程序
btn.onclick = function(){
    alert("Clicked");
}

注：

使用DOM0級方法指定的事件處理程序被認(rèn)為是元素的方法（即事件處理程序是在元素的作用域中運行）

以這種方式添加的事件處理程序會在事件流的冒泡階段被處理

將事件處理程序?qū)傩缘闹翟O(shè)置為null即可刪除事件處理程序：

btn.onclick = null;

“DOM2級事件”定義了兩個方法來處理事件處理程序：

addEventListener(要處理的事件名，事件處理程序函數(shù)，布爾值)

布爾值取值為false：在冒泡階段調(diào)用事件處理程序

布爾值取值為true：在捕獲階段調(diào)用事件處理程序

removeEventListener(要處理的事件名，事件處理程序函數(shù)，布爾值)

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    alert(this.id);
}, false);

注：

大多數(shù)都是將事件處理程序添加到冒泡階段，從而保證跨瀏覽器的兼容性，故通常都是將最后一個參數(shù)設(shè)為false

所有的DOM節(jié)點都包含上述兩個方法

DOM2級添加的事件處理程序也是在其依附的元素的作用域中運行的

使用DOM2級方法可以為同一個元素添加多個事件處理程序，這些事件處理程序會按照添加它們的順序從上到下執(zhí)行（DOM0級只能為同一個元素添加一個事件處理程序）

通過addEventListener()添加的事件處理程序只能通過removeEventListener()刪除，且刪除時傳入的參數(shù)必須與添加時傳入的參數(shù)相同。
但是通過addEventListener()添加的匿名函數(shù)無法移除，最好是在其他地方定義事件處理程序的函數(shù)，然后將該函數(shù)的名稱傳給第二個參數(shù)。

var btn = document.getElementById("myBtn");

//定義事件處理程序函數(shù)
var handler = function(){
    alert(this.id);
}

btn.addEventListener("click", handler, false);

btn.removeEventListener("click", handler, false);

支持IE事件處理程序的瀏覽器有IE和Opera

IE定義了兩個與DOM2級類似的方法：

attachEvent(事件處理程序名稱，事件處理程序函數(shù))：通過方法添加的事件處理程序會被添加到冒泡階段

detachEvent(事件處理程序名稱，事件處理程序函數(shù))

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

注：

使用attachEvent()方法時，事件處理程序會在全局作用域中運行（與DOM方法不同）

attachEvent()同樣可以為同一個元素添加多個事件處理程序，但這些事件處理程序是以定義的相反方向執(zhí)行的

detachEvent()刪除事件處理程序時，需傳入與attachEvent()相同的參數(shù)，且無法刪除匿名函數(shù)。

為了保證跨瀏覽器的兼容性，我們定義一個EventUtil對象，它包含addHandler()和removeHandler()兩個方法。

var EventUtil = {
    //addHandler()方法
    addHandler:function(element, type, handler){
        //DOM2級事件處理程序
        if(element.addEventListener){
            element.addEventListener(type, handler, false);
        }
        //IE事件處理程序
        else if(element.attachEvent){
            element.attachEvent("on"+type, handler);
        }
        //默認(rèn)使用DOM0級事件處理程序
        else{
            element["on"+type]=handler;
        }
    },
    //removeHandler()方法
    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]=handler;
        }
    }
};

觸發(fā)DOM上的某個事件時，會產(chǎn)生一個event事件對象，該對象包含著所有與事件有關(guān)的信息。
所有瀏覽器都支持event對象，但支持的方式不同。

兼容DOM（DOM0級和DOM2級）的瀏覽器將event對象傳入到事件處理程序中。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.type);  //"click"
};
btn.addEventListener("click", function(event){
    alert(event.type);  //"click"
}, false);

event對象的屬性和方法如下圖所示：

在上圖中，currentTarget的值始終等于this，而target只包含事件的實際目標(biāo)。

如果直接將事件處理程序指定給了目標(biāo)元素，則this === currentTarget === target

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.currentTarget === this);  //true
    alert(event.target === this);  //true 
}

//上例中，點擊事件的目標(biāo)是按鈕，并且把事件處理程序直接給了目標(biāo)元素，所以三者的值相等

如果將事件處理程序沒有直接指定給目標(biāo)元素，this === currentTarget !== target

document.body.onclick = function(event){
    alert(event.currentTarget === document.body);  //true
    alert(this === document.body);  //true
    alert(target === document.getElementById("myBtn"));  //true
}

//上例中，點擊世界的目標(biāo)是按鈕，但是事件處理程序制定給了body元素，故三者并不相等。

在IE中，指定事件處理程序的方法不同，訪問event對象的方法也不同：

（1）使用DOM0級添加事件處理程序 —— event對象是window對象的一個屬性

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    var event = window.event;
    alert(event.type);  //"click"
}

（2）使用attachEvent()添加事件處理程序 —— event對象會被傳入事件處理程序函數(shù)中

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(event){
    alert(event.type);  //"click"
});

（3）通過HTML特性指定事件處理程序 —— 通過event變量來訪問event對象

雖然DOM和IE中的event對象不同，但基于它們之間的相似性，可以實現(xiàn)跨瀏覽器的兼容性

var EventUntil = {
    
    //省略代碼
    addHandler: function(element, type, handler){},
    
    //獲取event對象
    getEvent: function(event){
        return event ? event : window.event;  
    },
    
    //獲取target
    getTarget: function(event){
        return event.target||event.srcElement;
    },
    
    //取消事件的默認(rèn)行為
    preventDefault: function(event){
        if(event.preventDefault){
            event.preventDefault();
        }
        else{
            event.returnValue = false;
        }
    },
    
    //取消冒泡
    stopPropagation: function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }
        else{
            event.cancelBubble = true;
        }
    },
    
    //省略代碼
    removeHandler:function(element, type, handler){}
};