javascript 事件處理程序介紹
更新時間:2012年06月27日 15:40:35 作者:
javascript 事件處理程序介紹,學(xué)習(xí)js的朋友可以參考下
1、DOM0級事件處理程序
將一個函數(shù)值給一個事件處理程序?qū)傩浴?
例如:
var btn = document.getElementById("myBtn");
btn.onclick = funtion(){
alert(this.id); //"myBtn"
}
刪除事件,btn.onclick = null;
--------------------------------------------------------------------------------
2、DOM2級事件處理程序
先介紹,“DOM2級事件”定義的兩個方法,用于處理指定和刪除事件處理程序的操作:
addEventListener()
removeEventListener()
所有DOM節(jié)點都包含這兩個方法,接受3個參數(shù):處理事件名、作為事件處理程序的函數(shù)、一個布爾值。
最后的布爾值參數(shù),true:表示在捕獲階段調(diào)用事件處理程序;false:表示在冒泡階段調(diào)用事件處理程序。\
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);
這兩個事件會按照順序觸發(fā)。
通過 addEventListener()添加的事件只能用removeEventListener()移除。移除時傳入的參數(shù)需與添加時的參數(shù)一致,也就是說匿名函數(shù)將無法移除。
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實現(xiàn)了與DOM中類似的兩個方法:
attachEvent()
detachEvent()
這兩個方法都接受兩個參數(shù):事件處理程序名稱和事件處理程序函數(shù)。
由于IE只支持時間冒泡,所以通過attachEvent() 添加的事件處理程序都會被添加到冒泡階段。
例如:
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick" , function(){
alert("Clicked");
})
注意,attachEvent()的第一個參數(shù)是“onclick”,而非 “click”。
IE的attachEvent()與DOM0的addEventListener()的主要區(qū)別是事件處理程序的作用域。
DOM0級方法,事件處理程序會在所屬元素的作用域內(nèi)運行;
attachEvent()方法,事件處理程序會在全局作用域中運行,因此 this等于 window。
attachEvent()也可以為一個元素添加多個事件處理程序。
var btn = document.getElementById("myBtn");
btn.attachEvent(”onclick“ , function(){
alert("clicked");
})
btn.attachEvent(”onclick“ , function(){
alert("Hello World!");
})
與DOM方法不同的是,這些事件處理程序不是以添加順序執(zhí)行,而是以相反的方向執(zhí)行。
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;
}
}
}
將一個函數(shù)值給一個事件處理程序?qū)傩浴?
例如:
復(fù)制代碼 代碼如下:
var btn = document.getElementById("myBtn");
btn.onclick = funtion(){
alert(this.id); //"myBtn"
}
刪除事件,btn.onclick = null;
--------------------------------------------------------------------------------
2、DOM2級事件處理程序
先介紹,“DOM2級事件”定義的兩個方法,用于處理指定和刪除事件處理程序的操作:
addEventListener()
removeEventListener()
所有DOM節(jié)點都包含這兩個方法,接受3個參數(shù):處理事件名、作為事件處理程序的函數(shù)、一個布爾值。
最后的布爾值參數(shù),true:表示在捕獲階段調(diào)用事件處理程序;false:表示在冒泡階段調(diào)用事件處理程序。\
復(fù)制代碼 代碼如下:
var btn = document.getElementById("myBtn");
btn.addEventListener("click",funciton(){
alert(this.id);
},false);
用DOM2級方法添加事件處理程序主要的好處是可以添加多個事件處理程序。
例如:
復(fù)制代碼 代碼如下:
var btn = document.getElementById("myBtn");
btn.addEventListener("click",funciton(){
alert(this.id);
},false);
btn.addEventListener("click",funciton(){
alert(“Hello World!”);
},false);
這兩個事件會按照順序觸發(fā)。
通過 addEventListener()添加的事件只能用removeEventListener()移除。移除時傳入的參數(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實現(xiàn)了與DOM中類似的兩個方法:
attachEvent()
detachEvent()
這兩個方法都接受兩個參數(shù):事件處理程序名稱和事件處理程序函數(shù)。
由于IE只支持時間冒泡,所以通過attachEvent() 添加的事件處理程序都會被添加到冒泡階段。
例如:
復(fù)制代碼 代碼如下:
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick" , function(){
alert("Clicked");
})
注意,attachEvent()的第一個參數(shù)是“onclick”,而非 “click”。
IE的attachEvent()與DOM0的addEventListener()的主要區(qū)別是事件處理程序的作用域。
DOM0級方法,事件處理程序會在所屬元素的作用域內(nèi)運行;
attachEvent()方法,事件處理程序會在全局作用域中運行,因此 this等于 window。
attachEvent()也可以為一個元素添加多個事件處理程序。
復(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;
}
}
}
相關(guān)文章
javascript創(chuàng)建含數(shù)字字母的隨機(jī)字符串方法總結(jié)
如果想創(chuàng)建一個含有數(shù)字、字母(大小寫)或者符號的字符串,比如從[a-zA-Z0-9]集合中中創(chuàng)建一個隨機(jī)的字符串,長度為5.有沒有什么比較好的代碼呢?本文提供了幾種方法,包括自動改變字符集合。一起來學(xué)習(xí)下。2016-08-08微信小程序吸底區(qū)域適配iPhoneX的實現(xiàn)
這篇文章主要介紹了微信小程序吸底區(qū)域適配iPhoneX的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04setTimeout內(nèi)不支持jquery的選擇器的解決方案
在JS中無論是setTimeout還是setInterval,在使用函數(shù)名作為調(diào)用句柄時都不能帶參數(shù),而在許多場合必須要帶參數(shù),這就需要想方法解決。2015-04-04