FF,chrome与IE的事件处理程序

今天学习了js的事件处理程序，IE与FF,chrome,safari,opera的处理事件方法不同，FF,chrome,safari,opera支持addEventLisener,而addEventListener是属于DOM2定义的函数，IE不支持DOM2，因此要想实现跨浏览器的事件处理，需要针对IE与FF,chrome,safari,opera进行不一样的处理。

1、事件流

首先要记录的就是事件流了，事件流有三个阶段，事件捕获阶段、处于目标阶段和事件冒泡阶段。处于目标阶段，其事件处理中被看成冒泡阶段的一部分。

DOM0级事件处理程序，直接对元素赋一个事件处理程序属性，如：

var btn = document.getElementById("btn");

btn.onclick=handler;

DOM2级事件处理程序，使用addEventListener和removeEventListener,如对ele绑定click事件：

ele.addEventListener("click",handler,false); //当第三个参数为false，表示冒泡阶段，当为true，表示事件捕获阶段；

2、IE的事件处理程序

IE不支持addEventListener,但可以用attachEvent和detachEvent处理事件，如对ele绑定click事件：

ele.attachEvent("onclick",handler);

注意：是onclick，而不是click；使用attachEvent，其处理事件的函数里的this为全局对象，即this==window。

可以验证下：

var ul = document.getElementById("ul");
ul.attachEvent("onclick",function(event){
console.log(this == window);
});

1 var EventUtil = {
2 addEvent:(function(type,handle,element){
3 if(element.addEventListener){
4 element.addEventListener(type,handle,false);
5 }else if(element.attachEvent){
6 element.attachEvent("on"+type,handle); //IE
7 }else{
8 element["on"+type]=handle;
9 }

}),

removeEvent:(function(type,handle,element){
if(element.removeEventListener){
element.removeEventListener(type,handle,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handle); //IE
}else{
element["on"+type] = null;
}
}),

getEvent:(function(event){
return event?event:window.event;
}),

getTarget:(function(event){
if(event.target){
return event.target;
}else if(event.srcElement){
return event.srcElement; //IE
}
}),

preventDefault:(function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}),

stopPropagation:(function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}),

relatedElement:(function(event){
if(element.relatedElement){
return element.relatedElement;
}else if(element.toElement){
return element.toElement; //IE mouseOut
}else if(element.fromElement){
return element.fromElement; //IE mouseOver
}
})
};View Code