首页 > 代码库 > 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。

可以验证下:

var ul = document.getElementById("ul");
    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的事件处理不同,封装成一个跨浏览器的事件处理:

 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         }
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 };
View Code

 

 

 

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