事件處理程序有DOM0級事件處理程序益咬、DOM2級事件處理程序漏健,IE事件處理程序,DOM0級事件處理程序具有簡單举农,跨瀏覽器的優(yōu)勢。DOM2級事件定義了兩個方法:addEventListener()和removeEventListener()這兩個方法用于指定和刪除事件處理程序敞嗡,IE也有兩個方法:attachEvent()和detachEvent(),由于IE8和更早的版本只支持事件冒泡颁糟,所以通過這兩個方法只能添加到冒泡階段,為了使事件處理程序可以在大多數(shù)瀏覽器正常的運行喉悴,只要關注冒泡階段即可棱貌。所以我們要寫一個方法,讓它根據(jù)情況使用DOM0級方法箕肃,DOM2級方法或者IE方法添加事件:
function addEvent(e,type,handler){
if(e.addEventListener){
e.addEventListener(type,handler,false);
}else if(e.attachEvent){
e.attachEvent("on"+type,handler);
}else{
e["on"+type]=handler;
}
}
可以這樣使用:
addEvent(btn,'’click',handler);
與addEvent()對應的移除事件的方法是removeEvent(),無論該事件用什么方法添加到元素中婚脱,如果其他方法無效,就采用DOM0級的方法移除勺像。
function removeEvent(e,type,handler){
if(e.removeEventListener){
e.removeEventListener(type,handler,false);
}else if(e.detachEvent){
e.detachEvent("on"+type,handler);
}else {
e["on"+type]=null;
}
}
這兩個方法首先都判斷是否存在DOM2級的方法障贸,如果存在就使用該方法傳入事件類型,事件處理程序吟宦,和第三個參數(shù)false(因為關注冒泡階段)篮洁,如果存在IE方法就用第二種,以此類推殃姓,但是以上兩種方法沒有考慮到IE瀏覽器作用域的問題袁波,其實這個我也不是很理解,參考老師的課件,添加的時候:
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;
}
不是很明白window.event辰狡。