浅谈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 相关文章推荐
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
微信小程序开发探究
Dec 27 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
axios post提交formdata的实例
Mar 16 Javascript
webpack项目使用eslint建立代码规范实现
May 16 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
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
简单使用Python自动生成文章
2014/12/25 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
C++是不是类型安全的
2014/02/18 面试题
vue路由实现登录拦截
2021/03/24 Vue.js
国际商务专业学生个人的自我评价
2013/09/28 职场文书
大学毕业通用个人的求职信
2013/12/08 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
个人工作能力自我评价
2015/03/05 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
win10下go mod配置方式
2021/04/25 Golang