javascript 事件处理程序介绍

225 阅读 0 评论 149 点赞

我是靠谱客的博主难过柜子，最近开发中收集的这篇文章主要介绍javascript 事件处理程序介绍，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、DOM0级事件处理程序
将一个函数值给一个事件处理程序属性。
例如：

复制代码代码如下:

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

删除事件，btn.onclick = null;
--------------------------------------------------------------------------------
2、DOM2级事件处理程序
先介绍，“DOM2级事件”定义的两个方法，用于处理指定和删除事件处理程序的操作：
addEventListener()
removeEventListener()
所有DOM节点都包含这两个方法，接受3个参数：处理事件名、作为事件处理程序的函数、一个布尔值。
最后的布尔值参数，true：表示在捕获阶段调用事件处理程序；false：表示在冒泡阶段调用事件处理程序。

复制代码代码如下:

 
var btn = document.getElementById("myBtn"); 
btn.addEventListener("click",funciton(){ 
alert(this.id); 
},false); 

用DOM2级方法添加事件处理程序主要的好处是可以添加多个事件处理程序。
例如：

复制代码代码如下:

 
var btn = document.getElementById("myBtn"); 
btn.addEventListener("click",funciton(){ 
alert(this.id); 
},false); 
btn.addEventListener("click",funciton(){ 
alert(“Hello World！”); 
},false); 

这两个事件会按照顺序触发。
通过 addEventListener()添加的事件只能用removeEventListener()移除。移除时传入的参数需与添加时的参数一致，也就是说匿名函数将无法移除。

复制代码代码如下:

 
var btn = document.getElementById("myBtn"); 
var handler = function(){ 
alert(this.id); 
}; 
btn.addEventListener("click" , handler , false); 
btn.removeEventListener("click", handler , false); 

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，以便兼容各种浏览器。
firefox、safari、chrome、opera支持DOM2级事件处理程序。
--------------------------------------------------------------------------------
3、IE事件处理程序
IE实现了与DOM中类似的两个方法：
attachEvent()
detachEvent()
这两个方法都接受两个参数：事件处理程序名称和事件处理程序函数。
由于IE只支持时间冒泡，所以通过attachEvent() 添加的事件处理程序都会被添加到冒泡阶段。
例如：

复制代码代码如下:

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

注意，attachEvent()的第一个参数是“onclick”,而非 “click”。
IE的attachEvent()与DOM0的addEventListener()的主要区别是事件处理程序的作用域。
DOM0级方法，事件处理程序会在所属元素的作用域内运行；
attachEvent()方法，事件处理程序会在全局作用域中运行，因此 this等于 window。
attachEvent()也可以为一个元素添加多个事件处理程序。

复制代码代码如下:

 
var btn = document.getElementById("myBtn"); 
btn.attachEvent(”onclick“ , function(){ 
alert("clicked"); 
}) 
btn.attachEvent(”onclick“ , function(){ 
alert("Hello World!"); 
}) 

与DOM方法不同的是，这些事件处理程序不是以添加顺序执行，而是以相反的方向执行。
detachEvent() 的用法与removeEventListener()的用法一样。
--------------------------------------------------------------------------------
4、跨浏览器的事件处理程序

复制代码代码如下:

 
var EventUtil = { 
addHandler : 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.removeElementListener) { 
element.removeElementListener( type , handler , flase); 
} else if ( element.detachEvent) { 
element.detachEvent ( "on" + type , handler) 
} else { 
element["on" + type] = handler; 
} 
} 
} 