跨浏览器的javascript事件的封装

Posted wxw婉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨浏览器的javascript事件的封装相关的知识,希望对你有一定的参考价值。

一,跨浏览器的事件处理程序

1,DOM0级处理事件

将一个函数赋值给一个事件处理程序属性。

事件流:冒泡阶段。

使用:

为元素增加事件:

1 var btn = document.getElementById("myBtn");
2 btn.onclick = function(){
3     alert(this.id);
4 }

删除事件:

1 btn.onclick = null;

2,DOM2级事件处理程序

两个方法:addEventListener()和removeEventListener()

三个参数:处理事件名,事件处理程序,布尔值。(最后的布尔值为true,表示在捕获阶段调用事件处理程序;为false,表示在冒泡调用事件处理程序)

使用:

var btn = document.getElementById("myBtn");
var handler = function(){
    alert(this.id);
}
btn.addEventListener(‘click‘,handler,false)

删除事件:

btn.removeEventListener(‘click‘,handler,false)

注意:

1),addEventListener()添加的匿名函数将无法移除;

2),大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段(即第三个参数为false);

3),如果添加了多个事件处理程序,会按照添加它们的顺序触发。

3,IE事件处理程序

两个方法:attachEvent(),detachEvent()

两个参数:事件处理程序名称,事件处理程序函数

事件流:冒泡阶段

使用:

var btn = document.getElementById("myBtn");
var handler = function(){
    alert(this.id);
}
btn.attachEvent(‘onclick‘,handler)

删除事件:

btn.detachEvent(‘onclick‘,handler)

注意:与DOM方法不同的是,这些事件处理程序不是以添加它们的顺序执行,而是以相反的顺序被触发。

4,跨浏览器的事件处理程序

为了以跨浏览器的方式处理事件,保证处理事件的代码能在大多数浏览器下一致运行,创建自己的对象,包含上面两个方法。

如下:

 1 var EventUnit = {
 2         addHandle:function(element,type,handler){
 3             if(element.addEventListener){
 4                 element.addEventListener(type,handler,false);
 5             }else if(element.attachEvent){
 6                 element.attachEvent("on"+type,handler)
 7             }else{
 8                 element["on"+type] = handler;
 9             }
10         },
11         removeHandler:function(element,type,handler){
12             if(element.removeEventListener){
13                 element.removeEventListener(type,handler,false);
14             }else if(element.detachEvent){
15                 element.detachEvent("on"+type,handler)
16             }else{
17                 element["on"+type] = null;
18             }
19         }
20 };

用法:

1     var btn = document.getElementById(‘myBtn‘);
2     var handler = function(){
3         alert(this.id);
4     }
5     EventUnit.addHandle(btn,‘click‘,handler);
6     EventUnit.removeHandler(btn,‘click‘,handler);

二,事件对象

在触发DOM上的某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息。

1,DOM中的事件对象(DOM0级和DOM2级)

兼容DOM的浏览器会将一个event对象传入到事件处理程序。

例子:

1 var btn = document.getElementById("myBtn");
2 btn.onclick = function(event){
3     alert(event.type);//‘click‘
4 };
5 btn.addEventListener(‘click‘,function(event){
6     alert(event.type);//‘click‘
7 }.false);

event对象包含与创建它的特定事件有关的属性和方法。如下

bubbles(Boolean):表明事件是否冒泡;

cancelabel(Boolean):表明是否可以取消事件的默认行为;

currentTarget(Element):其事件处理程序当前正在处理事件的那个元素;

defaultPrevented(Boolean): 为true表示已经调用preventDefault();

detail(Integer):与事件相关的细节信息;

eventPhase(Integer):调用事件处理程序的阶段:1表示捕获阶段,2表示“处于目标”,3表示冒泡阶段;

preventDefault()(Function):取消事件的默认行为。如果cancelabel是true则可以使用这个方法;

stopImmediatePropagation()(Function):取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用;

stopPropagation()(Function):取消事件的进一步捕获或冒泡。如果bubbles为true,则可以使用这个方法;

target(Element):事件的目标;

trusted(Boolean):为true表示事件是浏览器生成,为false表示事件是由开发人员通过javascript创建的;

type(String):被触发的事件类型;

view(AbstractView):与事件关联的抽象视图。等同于发生事件的window对象

比较常用的属性和方法(下面特别提一下)

1),事件处理内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。

2),通过检测event.type属性,可以让函数确定发生了什么事件,并执行相应的操作。(如:click,mouseover,mouseout)

3),阻止特定事件的默认行为,可以用preventDefault方法。但需要注意的是,只有cancelabel属性设置为true的事件,才可以使用preventDefault()来取消其默认行为。

4),stopPropagation()方法用于立即停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡。(如:直接添加到一个按钮的事件处理程序可以调用stopPargation(),从而避免触发注册在document.body上面的事件处理程序)

备注:只有在事件处理程序执行期间,event对象才会存在;一旦事件处理程序执行完成,event对象就会被销毁。

2,IE中的事件对象

两种情况:

第一种:在使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。

1 var btn = document.getElementById("myBtn");
2 btn.onclick = function(){
3     var  event = window.event;
4     alert(event.type);//‘click‘
5 };

第二种:如果事件处理程序是使用attachEvent()添加的,那么就会有一个event对象作为参数被传入事件处理程序函数中。

1 var btn = document.getElementById(‘myBtn‘);
2 btn.attachEvent("onclick",function(event){
3     alert(event.type);//"click
4 })

但在使用attachEvent()的情况下,也可以通过window对象来访问event对象。

IE的event对象同样也包含与创建它的事件相关的属性和方法。如下:

canceBubble(Boolean):默认为false,但将其设置为true就可以取消事件冒泡(与DOM中的stopPropagation()方法相同);

returnValue(Boolean):默认为true,但将其设置为false就可以取消事件的默认行为(与DOM中的preventDefault()方法相同);

srcElement(Element):事件的目标(与DOM中的traget属性相同)

type(String):被触发的事件的类型;

3,跨浏览器的事件对象

在前面的对象基础上增加4个新方法;

 1 var EventUnit = {
 2         addHandle:function(element,type,handler){
 3             if(element.addEventListener){
 4                 element.addEventListener(type,handler,false);
 5             }else if(element.attachEvent){
 6                 element.attachEvent("on"+type,handler)
 7             }else{
 8                 element["on"+type] = handler;
 9             }
10         },
11         removeHandler:function(element,type,handler){
12             if(element.removeEventListener){
13                 element.removeEventListener(type,handler,false);
14             }else if(element.detachEvent){
15                 element.detachEvent("on"+type,handler)
16             }else{
17                 element["on"+type] = null;
18             }
19         },
20         getEvent:function(event){
21             return event ? event : window.event;
22         },
23         getTarget:function(event){
24             return event.target || event.srcElement;
25         },
26         preventDefault:function(event){
27             if(event.preventDefault){
28                 event.preventDefault()
29             }else{
30                 event.returnValue = false;
31             }
32         },
33         stopPropagation:function(event){
34             if(event.stopPropagation){
35                 event.stopPropagation()
36             }else{
37                 event.canceBubble = true;
38             }
39         }
40 };

把上面的EventUnit封装在js文件中,对该文件进行引用,就可以使用里面的方法进行浏览器的兼容。

以上就是跨浏览器的javascript事件的封装,参考《Javascript高级程序设计》第3版的第13章:事件

  


以上是关于跨浏览器的javascript事件的封装的主要内容,如果未能解决你的问题,请参考以下文章

跨浏览器事件对象封装

封装常用的Javascript跨浏览器方法

JavaScript跨浏览器绑定事件函数的优化

跨浏览器的事件对象-------EventUtil 中的方法及用法

Dom 加载事件跨浏览器原生 javascript 代码

跨浏览器事件封装