事件流：分兩種，IE的是 事件冒泡流 ，事件開(kāi)始時(shí)從最具體的元素接收，逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)（Element -> Document）。與之相反的是 Netscape 的 事件捕獲流 。
DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。
大多數(shù)情況下都是將事件處理程序添加到事件流的冒泡階段。一個(gè) EventUtil 的栗子：
var EventUtil = {
addHandler: function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent('on' + type, handler); // IE8
}else{
element['on' + type] = handler;
}
},
removeHandler: function(){...}
}
下面我們?cè)敿?xì)來(lái)看：
DOM0級(jí)事件處理程序
通過(guò)Javascript指定事件處理程序的傳統(tǒng)方式，就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩浴?BR> 每個(gè)元素都有自己的事件處理程序?qū)傩裕@些屬性通常全部小寫(xiě)，例如onclick。將這種屬性的值設(shè)置為一個(gè)函數(shù)，就可以指定事件處理程序。
var btn = document.getElementById('myBtn');
// 添加事件處理程序
btn.onclick = function () {
alert( this );//為DOM元素btn
};
// 移除事件處理程序
btn.onclick = null;
優(yōu)點(diǎn):1.簡(jiǎn)單2.具有跨瀏覽器的優(yōu)勢(shì)
缺點(diǎn):在代碼運(yùn)行之前不會(huì)指定事件處理程序，因此這些代碼在頁(yè)面中位于按鈕后面，就有可能在一段時(shí)間怎么點(diǎn)擊都沒(méi)反應(yīng)，用戶體驗(yàn)變差。
DOM2級(jí)事件處理程序
定義了兩個(gè)方法，用于處理指定和刪除事件處理程序的操作:addEventListener()和removeEventListener()。三個(gè)參數(shù)，1.要處理的事件名。2.作為事件處理程序的函數(shù)3.一個(gè)布爾值。最后這個(gè)布爾值為true,表示在捕獲階段調(diào)用事件處理程序，false表示在冒泡階段調(diào)用事件處理程序。
// 添加多個(gè)事件處理程序
var btn = document.getElementById('myBtn');
btn.addEventListener('click',function (){
alert( this );// 為DOM元素btn
},false );
btn.addEventListener('click',function () {
alert('Hello World');
},false);
// 移除事件處理程序
btn.removeEventListener('click',function () {
// 匿名函數(shù)無(wú)法被移除,移除失敗
},false);
// 改寫(xiě)
var handler = function () {
alert(this.id);
};
btn.addEventListener('click',handler,false);
// 再次移除事件處理程序
btn.removeEventListener('click',handler,false);// 移除成功
這兩個(gè)事件處理程序會(huì)按照添加他們的順序觸發(fā)。大多數(shù)情況，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度的兼容各種版本的瀏覽器。
優(yōu)點(diǎn): 一個(gè)元素可以添加多個(gè)事件處理程序
缺點(diǎn): IE8及以下瀏覽器不支持DOM2級(jí)事件處理程序。(包括IE8)
IE事件處理程序
定義了兩個(gè)方法，與上類(lèi)似:attachEvent(),detachEvent()。這兩個(gè)方法接收相同的兩個(gè)參數(shù):事件處理程序名稱(chēng)和事件處理程序函數(shù)。由于IE8以及更早版本的瀏覽器只支持事件冒泡，所以通過(guò)detachEvent()添加的事件處理程序會(huì)被添加到冒泡階段。
var btn = document.getElementById('myBtn');
btn.attachEvent('onclick', function(){
alert( this );// window
});
btn.attachEvent('onclick', funciton(){
alert("HELLO, WORLD");
});
點(diǎn)擊按鈕，這兩個(gè)事件處理程序的觸發(fā)順序與上述剛好相反。不是按照添加事件處理程序的順序觸發(fā)，剛好相反。
優(yōu)點(diǎn):一個(gè)元素可以添加多個(gè)事件處理程序
缺點(diǎn):只支持IE。
跨瀏覽器的事件處理程序
eg:
var EventUtil = {
addHandler : function ( ele, type, handler ) {
if ( ele.addEventListener ) {
ele.addEventListener( type, handler, false );
} else if ( ele.attachEvent ) {
ele.attachEvent( 'on' + type, handler );
} else {
ele['on' + type] = handler
}
},
removeHandler: function ( ele, type, handler ) {
if ( ele.removeEventListener ) {
ele.removeEventListener( type, handler, false );
} else if ( ele.detachEvent ) {
ele.detachEvent( 'on' + type, handler );
} else {
ele[ 'on' + type ] = null;
}
}
}