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