浅谈Javascript事件处理程序的几种方式


Posted in Javascript onJune 27, 2012

事件就是用户或浏览器自身执行的某种动作。比如说click,mouseover,都是事件的名字。而相应某个事件的函数就叫事件处理程序(或事件侦听器)。为事件指定处理程序的方式有好几种。
一:HTML事件处理程序。
如:

<script type="text/javascript"> 
function show(){ 
alert('hello world!'); 
} 
</script> 
<input type="button" value="click me" onclick="show()"/>

相信这种方式是目前咱们大家用得比较多的一种,但是在html中指定事件处理程序有两个缺点。
(1)首先:存在一个时差问题。就本例子来说,假设show()函数是在按钮下方,页面的最底部定义的,如果用户在页面解析show()函数之前就单击了按钮,就会引发错误;
(2)第二个缺点是html与javascript代码紧密耦合。如果要更换时间处理程序,就要改动两个地方:html代码和javascript代码。
因此,许多开发人员摒弃html事件处理程序,转而使用javascript指定事件处理程序。
二:Javascript指定事件处理程序
javascript指定事件处理程序包括三种方式:
(1):DOM0级事件处理程序
如:
var btn=document.getElementById("mybtn"); //取得该按钮的引用 
btn.onclick=function(){ 
alert('clicked'); 
alert(this.id); // mybtn

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
删除DOM0级方法指定的事件处理程序:
btn.onclick=null; // 删除事件处理程序
}
(2):DOM2级事件处理程序
DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法,并且它们都接受3个参数:要处理的事件名,做为事件处理程序的函数和一个布尔值。最后这个参数如果是true,表示在捕获阶段调用事件处理程序;如果是fasle,表示在冒泡阶段调用事件处理程序。
如:
var btn=document.getElementById("mybtn"); 
btn.addEventListener("click",function(){ 
alert(this.id); 
},false);

使用DOM2级事件处理程序的主要好处是可以添加多个事件处理程序。
如:
var btn=document.getElementById("mybtn"); 
btn.addEventListener("click",function(){ 
alert(this.id); 
},false); 
btn.addEventListener("click",function(){ 
alert("hello world!"); 
},false);

这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照它们的顺序触发。
通过addEventListener()添加的时间处理程序只能使用removeEventListener()来移除,移除时传入的参数与添加时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。
如:
var btn=document.getElementById("mybtn"); 
btn.addEventListener("click",function(){ 
alert(this.id); 
},false); 
//移除 
btn.removeEventListener("click",function(){ //这样写没有用 (因为胃第二次与第一次相比是一个完全不同的函数) 
alert(this.id); 
},false);

解决办法:
var btn=document.getElementById("mybtn"); 
var hander=function(){ 
alert(this.id); 
}; 
btn.addEventListener("click",hander,false); btn.removeEventListener("click",hander,false); // 有效

注意:这里我们的第三个参数都是false,是在冒泡阶段添加的。大多数情况下,都是就事件处理程序添加到事件流的冒泡阶段,这样可以最大限度的兼容各种浏览器。
三:IE事件处理程序
IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。这两个方法接受相同的两个参数:事件处理程序名称和事件处理程序函数。由于IE只支持时间冒泡,所有通过attachEvent()添加的事件处理程序都会被添加包冒泡阶段。
如:

三:

var btn=document.getElementById("mybtn"); 
btn.attachEvent("onclick",function(){ 
alert("clicked"); 
})

注意:attachEvent()函数的第一个参数是"onclick",而非DOM的addEventListener()中的"click"。
attachEvent()方法也可以用来为一个元素添加多个事件处理程序。
如:
var btn=document.getElementById("mybtn"); 
btn.attachEvent("onclick",function(){ 
alert("clicked"); 
}); 
btn.attachEvent("onclick",function(){ 
alert("hello world!"); 
});

这里调用了两次attachEvent(),为同一个按钮添加了两个不同的事件处理程序。不过,与DOM方法不同的是,这些事件处理程序不是以它们的添加顺序执行,而是以相反的顺序被触发。单击这个例子中的按钮:首先看到的是"hello world",然后才是"clicked".
使用attachEvent()添加的事件可以通过detachEvent()来移除,条件是必须提供相同的参数。
var btn=document.getElementById("mybtn"); 
var hander=function(){ 
alert("clicked"); 
} 
btn.detachEvent("onclick",hander}); // 移除

以上三种方式为目前的主要的事件处理程序方式,那看到这里你肯定会想到,既然不同的浏览器会有不同的差异,那怎么保证跨浏览器的事件处理程序呢?
为了以跨浏览器的方式处理事件,不少的开发人员是使用能够隔离浏览器差异性的Javascript库,还有一些开发人员会自己开发最合适的事件处理方法。
这里提供一个EventUtil对象,可以用这个对象来处理浏览期间的差异:
var EventUtil = { 
addHandler: function(element, type, handler){ // 该方法接受3个参数:要操作的元素,事件名称和事件处理程序函数 
if (element.addEventListener){ //检查传入的元素是否存在DOM2级方法 
element.addEventListener(type, handler, false); // 若存在,则使用该方法 
} else if (element.addEvent){ // 如果存在的是IE的方法 
element.attachEvent("on" + type, handler); //则使用IE的方法,注意,这里的事件类型必须加上"on"前缀。 
} else { // 最后一种可能是使用DOM0级 
element["on" + type] = hander; 
} 
}, removeHandler: function(element, type, handler){ // 该方法是删除之前添加的事件处理程序 
if (element.removeEventListener){ //检查传入的元素是否存在DOM2级方法 
element.removeEventListener(type, handler, false); // 若存在,则使用该方法 
} else if (element.detachEvent){ // 如果存在的是IE的方法 
element.detachEvent("on" + type, handler); //则使用IE的方法,注意,这里的事件类型必须加上"on"前缀。 
} else { // 最后一种可能是使用DOM0及方法(在现代浏览器中,应该不会执行这里的代码) 
element["on" + type] = null; 
} 
} 
};

可以像下面这样使用EventUtil对象:
var btn =document.getElementById("mybtn"); 
var hander= function(){ 
alert("clicked"); 
}; 
//这里省略了部分代码 
EventUtil.addHandler(btn,"click",hander); 
//这里省略了部分代码 
EventUtil.removeHandler(btn,"click",hander); //移除之前添加的事件处理程序

可见,使用addHandler和removeHandler来添加和移除事件处理程序还是很方便的。
Javascript 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
原生js实现照片墙效果
Oct 13 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 Javascript
javascript 事件处理程序介绍
Jun 27 #Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 #Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 #Javascript
跨浏览器的事件对象介绍
Jun 27 #Javascript
UI Events 用户界面事件
Jun 27 #Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 #Javascript
浅谈Javascript事件模拟
Jun 27 #Javascript
You might like
详解PHP中的Traits
2015/07/29 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
用Python编写简单的定时器的方法
2015/05/02 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
实例讲解Python3中abs()函数
2019/02/19 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
党员一帮一活动总结
2014/07/08 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
员工规章制度范本
2015/08/07 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript