事件处理程序有DOM0级事件处理程序、DOM2级事件处理程序,IE事件处理程序,DOM0级事件处理程序具有简单,跨浏览器的优势。DOM2级事件定义了两个方法:addEventListener()和removeEventListener()这两个方法用于指定和删除事件处理程序,IE也有两个方法:attachEvent()和detachEvent(),由于IE8和更早的版本只支持事件冒泡,所以通过这两个方法只能添加到冒泡阶段,为了使事件处理程序可以在大多数浏览器正常的运行,只要关注冒泡阶段即可。所以我们要写一个方法,让它根据情况使用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级的方法,如果存在就使用该方法传入事件类型,事件处理程序,和第三个参数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。