快捷導(dǎo)航

javascript 事件處理程序介紹

更新時(shí)間：2012年06月27日 15:40:35 作者：

javascript 事件處理程序介紹，學(xué)習(xí)js的朋友可以參考下

1、DOM0級事件處理程序
將一個(gè)函數(shù)值給一個(gè)事件處理程序?qū)傩浴?
例如：

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

刪除事件，btn.onclick = null;
--------------------------------------------------------------------------------
2、DOM2級事件處理程序
先介紹，“DOM2級事件”定義的兩個(gè)方法，用于處理指定和刪除事件處理程序的操作：
addEventListener()
removeEventListener()
所有DOM節(jié)點(diǎn)都包含這兩個(gè)方法，接受3個(gè)參數(shù)：處理事件名、作為事件處理程序的函數(shù)、一個(gè)布爾值。
最后的布爾值參數(shù)，true：表示在捕獲階段調(diào)用事件處理程序；false：表示在冒泡階段調(diào)用事件處理程序。\

復(fù)制代碼代碼如下:

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

用DOM2級方法添加事件處理程序主要的好處是可以添加多個(gè)事件處理程序。
例如：

復(fù)制代碼代碼如下:

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

這兩個(gè)事件會按照順序觸發(fā)。
通過 addEventListener()添加的事件只能用removeEventListener()移除。移除時(shí)傳入的參數(shù)需與添加時(shí)的參數(shù)一致，也就是說匿名函數(shù)將無法移除。

復(fù)制代碼代碼如下:

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

大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段，以便兼容各種瀏覽器。
firefox、safari、chrome、opera支持DOM2級事件處理程序。
--------------------------------------------------------------------------------
3、IE事件處理程序
IE實(shí)現(xiàn)了與DOM中類似的兩個(gè)方法：
attachEvent()
detachEvent()
這兩個(gè)方法都接受兩個(gè)參數(shù)：事件處理程序名稱和事件處理程序函數(shù)。
由于IE只支持時(shí)間冒泡，所以通過attachEvent() 添加的事件處理程序都會被添加到冒泡階段。
例如：

復(fù)制代碼代碼如下:

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

注意，attachEvent()的第一個(gè)參數(shù)是“onclick”,而非 “click”。
IE的attachEvent()與DOM0的addEventListener()的主要區(qū)別是事件處理程序的作用域。
DOM0級方法，事件處理程序會在所屬元素的作用域內(nèi)運(yùn)行；
attachEvent()方法，事件處理程序會在全局作用域中運(yùn)行，因此 this等于 window。
attachEvent()也可以為一個(gè)元素添加多個(gè)事件處理程序。

復(fù)制代碼代碼如下:

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

與DOM方法不同的是，這些事件處理程序不是以添加順序執(zhí)行，而是以相反的方向執(zhí)行。
detachEvent() 的用法與removeEventListener()的用法一樣。
--------------------------------------------------------------------------------
4、跨瀏覽器的事件處理程序

復(fù)制代碼代碼如下:

 
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; 
} 
} 
} 