浅谈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 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
Display SQL Server Version Information
Jun 21 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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实现javascript的escape和unescape函数
2013/06/29 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
js实现一键复制功能
2017/03/16 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
Django工程的分层结构详解
2019/07/18 Python
python用requests实现http请求代码实例
2019/10/31 Python
Python通过format函数格式化显示值
2020/10/17 Python
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
亿企通软件测试面试题
2012/04/10 面试题
简历上的自我评价
2014/02/03 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
高中军训感言600字
2014/03/11 职场文书
群众路线党课主持词
2014/04/01 职场文书
会计个人实习计划书
2014/08/15 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
如何利用golang运用mysql数据库
2022/03/13 Golang
vue实力踩坑之push当前页无效
2022/04/10 Vue.js