浅谈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 相关文章推荐
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
angular实现商品筛选功能
Feb 01 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
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中批量替换文件名的实现代码
2011/07/20 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
utf8的编码算法 转载
2006/12/27 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
python网络编程之读取网站根目录实例
2014/09/30 Python
Python性能优化技巧
2015/03/09 Python
python实现12306火车票查询器
2017/04/20 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
Python元字符的用法实例解析
2018/01/17 Python
用python与文件进行交互的方法
2018/03/01 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
倡议书范文大全
2015/04/28 职场文书
患者身份识别制度
2015/08/06 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书