前面內(nèi)容我們可以看到耀找，在不同的瀏覽器下著榴，添加和移除事件處理程序方式不相同洋幻，要想寫出跨瀏覽器的事件處理程序讲竿，首先我們要了解不同的瀏覽器下處理事件處理程序的區(qū)別
在添加事件處理程序事addEventListener和attachEvent主要有幾個區(qū)別
- 參數(shù)個數(shù)不相同拟杉，這個最直觀庄涡，addEventListener有三個參數(shù)，attachEvent只有兩個搬设，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段穴店，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
- 第一個參數(shù)意義不同，addEventListener第一個參數(shù)是事件類型（比如click拿穴，load）泣洞，而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
- 事件處理程序的作用域不相同默色，addEventListener的作用域是元素本身球凰，this是指的觸發(fā)元素，而attachEvent事件處理程序會在全局變量內(nèi)運(yùn)行腿宰，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.attachEvent('on' + type, handler, );
return true;
}
return false;
}
這樣兑牡，首先我們解決了第一個問題參數(shù)個數(shù)不同央碟，現(xiàn)在三個參數(shù)，采用事件冒泡階段觸發(fā)
第二個問題也得以解決，如果是IE亿虽，我們給type添加上on
第四個問題目前還沒有解決方案菱涤，需要用戶自己注意，一般情況下洛勉，大家也不會添加很多事件處理程序
試試這個方法感覺很不錯粘秆，但是我們沒有解決第三個問題，由于處理程序作用域不同收毫，如果handler內(nèi)有this之類操作攻走，那么就會出錯。在IE下此再，實際上大多數(shù)函數(shù)都會有this操作
function addEvent(node, type, handler) {
if (!node) return false;
if (node.addEventListener) {
node.addEventListener(type, handler, false);
return true;
}
else if (node.attachEvent) {
node.attachEvent('on' + type, function() { handler.apply(node); });
return true;
}
return false;
}
這樣處理就可以解決this的問題了昔搂，但是新的問題又來了，我們這樣等于添加了一個匿名的事件處理程序输拇，無法用detachEvent取消事件處理程序摘符，有很多解決方案，我們可以借鑒大師的處理方式策吠，jQuery創(chuàng)始人John Resig是這樣做的
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;
}
John Resig很巧妙地利用了閉包逛裤，看起來很不錯。
完整兼容封裝
function $$(el){
if(el.length < 1){
return;
}
var sub = el.substring(1);
if( el[0] === '#'){
return document.getElementById(sub);
}else if(el[0] === '.'){
return document.getElementsByClassName(sub);
}else{
return document.getElementsByTagName(el);
}
}
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;
}
function getEvent(e) {
return e || window.event;
}
function getTarget(e) {
return e.target || e.scrElement;
}
function preventDefault(e) {
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
}
function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
