在添加事件處理程序事addEventListener和attachEvent主要有幾個區(qū)別
參數(shù)個數(shù)不相同盆赤，這個最直觀，addEventListener有三個參數(shù)歉眷，attachEvent只有兩個牺六，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設置為冒泡階段）
第一個參數(shù)意義不同汗捡，addEventListener第一個參數(shù)是事件類型（比如click淑际，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick扇住，onload）
事件處理程序的作用域不相同春缕，addEventListener的作用域是元素本身，this是指的觸發(fā)元素艘蹋，而attachEvent事件處理程序會在全局變量內(nèi)運行锄贼，this是window，所以剛才例子才會返回undefined女阀，而不是元素id
為一個事件添加多個事件處理程序時宅荤，執(zhí)行順序不同，addEventListener添加會按照添加順序執(zhí)行强品，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的膘侮，但是添加的多了就無規(guī)律了)屈糊，所以添加多個的時候的榛，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序逻锐，最好自己處理夫晌，不要指望瀏覽器
了解了這四點區(qū)別后我們可以嘗試寫一個瀏覽器兼容性比較好的添加事件處理程序方法
function addEvent(node, type, handler) {
if (!node) return false;
if (node.addEventListener) {
node.addEventListener(type, handler, false);
return true;
} else if (node.attachEvent) {
node['e' + type + handler] = handler;
node[type + handler] = function() {
node['e' + type + handler](window.event);
};
node.attachEvent('on' + type, node[type + handler]);
return true;
}
return false;
}
在取消事件處理程序的時候：
function removeEvent(node, type, handler) {
if (!node) return false;
if (node.removeEventListener) {
node.removeEventListener(type, handler, false);
return true;
} else if (node.detachEvent) {
node.detachEvent('on' + type, node[type + handler]);
node[type + handler] = null;
}
return false;
}
