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

时间：2014-11-03 22:20:02 阅读：164 评论：0 收藏：0 [点我收藏+]

今天学习了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的事件处理程序

标签：style blog http io color ar os 使用 sp

原文地址：http://www.cnblogs.com/wmmang-blog/p/4072207.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行