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

1,DOM0级处理事件

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

事件流:冒泡阶段。

使用:

为元素增加事件:

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

删除事件:

 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,跨浏览器的事件处理程序

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

如下:

 var EventUnit = {
addHandle:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler)
}else{
element["on"+type] = handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler)
}else{
element["on"+type] = null;
}
}
};

用法:

     var btn = document.getElementById('myBtn');
var handler = function(){
alert(this.id);
}
EventUnit.addHandle(btn,'click',handler);
EventUnit.removeHandler(btn,'click',handler);

二,事件对象

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

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

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

例子:

 var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.type);//'click'
};
btn.addEventListener('click',function(event){
alert(event.type);//'click'
}.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对象的一个属性存在。

 var btn = document.getElementById("myBtn");
btn.onclick = function(){
var event = window.event;
alert(event.type);//'click'
};

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

 var btn = document.getElementById('myBtn');
btn.attachEvent("onclick",function(event){
alert(event.type);//"click
})

但在使用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个新方法;

 var EventUnit = {
addHandle:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler)
}else{
element["on"+type] = handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler)
}else{
element["on"+type] = null;
}
},
getEvent:function(event){
return event ? event : window.event;
},
getTarget:function(event){
return event.target || event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault()
}else{
event.returnValue = false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation()
}else{
event.canceBubble = true;
}
}
};

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

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

跨浏览器的javascript事件的封装的更多相关文章

  1. (译)学习如何构建自动化、跨浏览器的JavaScript单元测试

    作者:Philip Walton 译者:Yeaseon 原文链接:点此查看 译文仅供个人学习,不用于任何形式商业目的,转载请注明原作者.文章来源.翻译作者及链接,版权归原文作者所有. ___ 我们都知 ...

  2. JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型

    事件的移除 removeEventListener() 第二个参数需要指定要移除的事件句柄,不能是匿名函数,因为无法识别 想要移除成功,那么三个参数必须跟addEventListener中的三个完全一 ...

  3. jquery对javascript事件的封装一览

    描述 jquery javascript 鼠标点击某个对象 click() onclick  鼠标双击某个对象 dblclick() ondblclick 元素获得焦点 focus() onfocus ...

  4. Webix快速跨浏览器的JavaScript UI组件

    网址:http://webix.com/ 寥寥几行代码就将页面渲染出来了,确实值得一试!

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

    JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...

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

    var EventUntil={ // 跨浏览器的添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListen ...

  7. 【repost】JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  8. JavaScript——事件模型

    DOM事件流: DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程可称为DOM事件 ...

  9. 第一百二十一节,JavaScript事件绑定及深入

    JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...

随机推荐

  1. Java 虚拟机概述

    虚拟机是一种抽象化的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实现的.Java虚拟机有自己完善的硬体架构,如处理器.堆栈.寄存器等,还具有相应的指令系统.Java虚拟机屏蔽了与具体操作系统平 ...

  2. hmtl div水平、垂直居中

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单.水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两种 ...

  3. cmp指令

    cmp是比较指令,cmp的功能相当于减法指令,只是不保存结果.cmp指令执行后,将对标志寄存器产生影响.其他相关指令通过识别这些被影响的标志寄存器位来得知比较结果. cmp指令格式: cmp 操作对象 ...

  4. python小练习:使用循环和函数实现一个摇骰子小游戏。游戏规则如下:游戏开始,首先玩家选择Big or Small(押大小),选择完成后开始摇三个骰子,计算总值,11<=总值<=18为“大”,3<=总值<=10为“小”。然后告诉玩家猜对或者是猜错的结果。

    python小练习:使用循环和函数实现一个摇骰子小游戏.游戏规则如下:游戏开始,首先玩家选择Big or Small(押大小),选择完成后开始摇三个骰子,计算总值,11<=总值<=18为“ ...

  5. MySQL优化(五) SQL 语句的优化 索引、explain

    一.索引 1.分类 (1)主键索引:当一张表的某个字段设置为主键时,该字段就是主键索引: (2)唯一索引:索引列中的值必须是唯一的,但是允许为空值(可以存在多个null): (3)普通索引:基本索引类 ...

  6. 利用maven将项目打包成一个可以运行的独立jar包

    目标:希望把Java项目打包成一个完整的jar包,可以独立运行,不需要再依赖其他jar包. 我们在用eclipse中mvn创建mvn项目的时候,选择非webapp,会默认的以jar打包形式,如下图: ...

  7. Spring Boot-右键maven build成功但是直接运行main方法出错的解决方案

    1.代码就一个Controller,从官网复制过来的,如下 package com.springboot.controller; import org.springframework.boot.Spr ...

  8. 2018-10-19,下午4点拿到京东offer

    今天12点没有问题就签.岗位,地点都很满足.京东居然对我这么好,保证以后不做损坏京东利益的事写给以后的自己.

  9. To me

    1.流泪的时候不做任何决定: 2.不反复思考同一个问题: 3.不害怕做错什么: 4.有负面情绪是正常的: 5.一切的烦恼都是自找的: 6.说过的话一定要做到: 7.不要去害怕做一件事: 8.无论是对是 ...

  10. Win7 VS2015 x64 MASM汇编语言编写DLL文件

    有点坑记录一下. 首先创建工程时选控制台类型工程,Win32估计就应该选Win32的,反正我测试用的控制台. 然后选DLL类型,除了Empty其他全都去掉. 工程属性,masm勾上. Linker & ...