首页 > 代码库 > FF,chrome与IE的事件处理程序
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。
可以验证下：
ul.attachEvent("onclick",function(event){
console.log(this == window);
});
3、event，事件对象处理程序都会接受一个event对象
addEventListener处理事件中接收的event,常用的属性:
target:目标元素
currentTarget:当前目标元素
preventDefault():阻止默认行为
stopPropagation():阻止事件的传播
type:事件类型
attachEvent处理事件中接收的event，常用属性：
srcElement:目标元素
returnValue:当为false，阻止默认行为；默认为true
cancelBubble:当为true，阻止事件的传播；默认为false
type:事件类型
针对IE与非IE的事件处理不同，封装成一个跨浏览器的事件处理：
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 }
10
11 }),
12
13 removeEvent:(function(type,handle,element){
14 if(element.removeEventListener){
15 element.removeEventListener(type,handle,false);
16 }else if(element.detachEvent){
17 element.detachEvent("on"+type,handle); //IE
18 }else{
19 element["on"+type] = null;
20 }
21 }),
22
23 getEvent:(function(event){
24 return event?event:window.event;
25 }),
26
27 getTarget:(function(event){
28 if(event.target){
29 return event.target;
30 }else if(event.srcElement){
31 return event.srcElement; //IE
32 }
33 }),
34
35 preventDefault:(function(event){
36 if(event.preventDefault){
37 event.preventDefault();
38 }else{
39 event.returnValue = false;
40 }
41 }),
42
43 stopPropagation:(function(event){
44 if(event.stopPropagation){
45 event.stopPropagation();
46 }else{
47 event.cancelBubble = true;
48 }
49 }),
50
51 relatedElement:(function(event){
52 if(element.relatedElement){
53 return element.relatedElement;
54 }else if(element.toElement){
55 return element.toElement; //IE mouseOut
56 }else if(element.fromElement){
57 return element.fromElement; //IE mouseOver
58 }
59 })
60 };
FF,chrome与IE的事件处理程序