javascript attachEvent和addEventListener使用方法
更新時(shí)間：2009年03月19日 13:02:04 作者：
attachEvent與addEventListener區(qū)別
適應(yīng)的瀏覽器版本不同，同時(shí)在使用的過(guò)程中要注意
attachEvent方法 按鈕onclick
addEventListener方法 按鈕click
兩者使用的原理：可對(duì)執(zhí)行的優(yōu)先級(jí)不一樣，下面實(shí)例講解如下：
attachEvent方法，為某一事件附加其它的處理事件。（不支持Mozilla系列）
addEventListener方法 用于 Mozilla系列
舉例:
Java代碼
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
如果這樣寫(xiě),那么將會(huì)只有medhot3被執(zhí)行
寫(xiě)成這樣：
Java代碼:
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
執(zhí)行順序?yàn)閙ethod3->method2->method1
如果是Mozilla系列，并不支持該方法，需要用到addEventListener
Java代碼:
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
執(zhí)行順序?yàn)閙ethod1->method2->method3
使用實(shí)例：
1。 Java代碼:
var el = EDITFORM_DOCUMENT.body;
//先取得對(duì)象，EDITFORM_DOCUMENT實(shí)為一個(gè)iframe
if (el.addEventListener)...{
el.addEventListener('click', KindDisableMenu, false);
} else if (el.attachEvent)...{
el.attachEvent('onclick', KindDisableMenu);
}
2。 Java代碼:
if (window.addEventListener){
window.addEventListener('load', _uCO, false);
} else if (window.attachEvent){
window.attachEvent('onload', _uCO);
}
addEventListener方法 按鈕click
兩者使用的原理：可對(duì)執(zhí)行的優(yōu)先級(jí)不一樣，下面實(shí)例講解如下：
attachEvent方法，為某一事件附加其它的處理事件。（不支持Mozilla系列）
addEventListener方法 用于 Mozilla系列
舉例:
Java代碼
復(fù)制代碼 代碼如下:
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
如果這樣寫(xiě),那么將會(huì)只有medhot3被執(zhí)行
寫(xiě)成這樣：
Java代碼:
復(fù)制代碼 代碼如下:
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
執(zhí)行順序?yàn)閙ethod3->method2->method1
如果是Mozilla系列，并不支持該方法，需要用到addEventListener
Java代碼:
復(fù)制代碼 代碼如下:
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
執(zhí)行順序?yàn)閙ethod1->method2->method3
使用實(shí)例：
1。 Java代碼:
復(fù)制代碼 代碼如下:
var el = EDITFORM_DOCUMENT.body;
//先取得對(duì)象，EDITFORM_DOCUMENT實(shí)為一個(gè)iframe
if (el.addEventListener)...{
el.addEventListener('click', KindDisableMenu, false);
} else if (el.attachEvent)...{
el.attachEvent('onclick', KindDisableMenu);
}
2。 Java代碼:
復(fù)制代碼 代碼如下:
if (window.addEventListener){
window.addEventListener('load', _uCO, false);
} else if (window.attachEvent){
window.attachEvent('onload', _uCO);
}
您可能感興趣的文章:
- js中addEventListener()與removeEventListener()用法案例分析
- JavaScript使用addEventListener添加事件監(jiān)聽(tīng)用法實(shí)例
- window.addEventListener來(lái)解決讓一個(gè)js事件執(zhí)行多個(gè)函數(shù)
- JS在IE和FF下attachEvent,addEventListener學(xué)習(xí)筆記
- Javascript 的addEventListener()及attachEvent()區(qū)別分析
- fastjson到底做錯(cuò)了什么?為什么會(huì)被頻繁爆出漏洞?(推薦)
- Springmvc處理ajax請(qǐng)求并返回json數(shù)據(jù)
- Js on及addEventListener原理用法區(qū)別解析
相關(guān)文章
詳解JavaScript數(shù)組和字符串中去除重復(fù)值的方法
這篇文章主要介紹了詳解JavaScript數(shù)組和字符串中去除重復(fù)值的方法,及利用各種限制條件對(duì)數(shù)組和字符串進(jìn)行過(guò)濾,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了微信小程序開(kāi)發(fā)的基本流程步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
JavaScript canvas實(shí)現(xiàn)七彩時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)七彩時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
javascript結(jié)合ajax讀取txt文件內(nèi)容
這篇文章主要介紹了javascript結(jié)合ajax讀取txt文件內(nèi)容，方法非常簡(jiǎn)單，很實(shí)用，這里推薦給大家2014-12-12
JS對(duì)img標(biāo)簽進(jìn)行優(yōu)化使用onerror顯示默認(rèn)圖像
這篇文章主要介紹了JS對(duì)img標(biāo)簽進(jìn)行優(yōu)化使用onerror顯示默認(rèn)圖像,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了JS 事件機(jī)制,結(jié)合完整實(shí)例形式分析了JavaScript事件響應(yīng)機(jī)制、原理與使用技巧,需要的朋友可以參考下2020-01-01
ES6標(biāo)準(zhǔn)新增了一種新的函數(shù)：Arrow Function（箭頭函數(shù)）。那么下面這篇文章主要給大家介紹了箭頭函數(shù)中this的相關(guān)資料，有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-02-02
JavaScript中將秒轉(zhuǎn)換為分鐘和秒,通過(guò)將秒數(shù)除以 60 得到整分鐘數(shù),獲取剩余的秒數(shù),本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-09-09
利用js將ajax獲取到的后臺(tái)數(shù)據(jù)動(dòng)態(tài)加載至網(wǎng)頁(yè)中的方法
今天小編就為大家分享一篇利用js將ajax獲取到的后臺(tái)數(shù)據(jù)動(dòng)態(tài)加載至網(wǎng)頁(yè)中的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
options預(yù)檢請(qǐng)求的前后端解決方式詳解
這篇文章主要為大家介紹了options預(yù)檢請(qǐng)求的前后端解決方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04