JS在IE和FF下attachEvent,addEventListener學(xué)習(xí)筆記
更新時(shí)間:2009年11月26日 01:15:34 作者:
今天小弄了一下JS事件,主要說(shuō)一下FF和IE兼容的問(wèn)題
對(duì)象名.addEventListener("事件名(不帶ON)",函數(shù)名,true/false);(FF下)
對(duì)象名.attachEvent("事件名",函數(shù)名);(IE下)
說(shuō)明:
事件名稱,要注意的是"onclick"要改為"click","onblur"要改為"blur",也就是說(shuō)事件名不要帶"on"。
函數(shù)名,記住不要跟括號(hào)最后一個(gè)參數(shù)是個(gè)布爾值,表示該事件的響應(yīng)順序,下面重點(diǎn)介紹一下addEventListener的第3個(gè)參數(shù)(useCapture)。 userCapture若為true,則瀏覽器采用Capture,若為false則采用bubbing方式。建議用false,看個(gè)例子吧。
html代碼
<div id="div_test"> <input type="button" id="btn_test" value="se4.cn技術(shù)基地" /> </div>
js代碼
window.onload=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2,false); } function test1(){ alert("外層div觸發(fā)") } function test2(){ alert("內(nèi)層input觸發(fā)") }
自己體驗(yàn)一下,如果userCapture是true則test1先觸發(fā),如果userCapture是false則test2先觸發(fā)。
下面來(lái)說(shuō)一下,attachEvent
這個(gè)沒(méi)啥好說(shuō)的,相信大家也都用的挺熟的,主要是傳參那塊,等我用到 再說(shuō)吧,哈哈哈
示例:
創(chuàng)建綁定方法:
if (typeof document.addEventListener != "undefined") {
document.addEventListener("mousedown",_lhlclick,true);
} else {
document.attachEvent("onmousedown",_lhlclick);
}
刪除事件:
if (typeof document.addEventListener != "undefined") {
document.removeEventListener("mousedown",_lhlclick,true);
} else {
document.detachEvent("onmousedown",_lhlclick);
}
對(duì)象名.attachEvent("事件名",函數(shù)名);(IE下)
說(shuō)明:
事件名稱,要注意的是"onclick"要改為"click","onblur"要改為"blur",也就是說(shuō)事件名不要帶"on"。
函數(shù)名,記住不要跟括號(hào)最后一個(gè)參數(shù)是個(gè)布爾值,表示該事件的響應(yīng)順序,下面重點(diǎn)介紹一下addEventListener的第3個(gè)參數(shù)(useCapture)。 userCapture若為true,則瀏覽器采用Capture,若為false則采用bubbing方式。建議用false,看個(gè)例子吧。
html代碼
<div id="div_test"> <input type="button" id="btn_test" value="se4.cn技術(shù)基地" /> </div>
js代碼
復(fù)制代碼 代碼如下:
window.onload=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2,false); } function test1(){ alert("外層div觸發(fā)") } function test2(){ alert("內(nèi)層input觸發(fā)") }
自己體驗(yàn)一下,如果userCapture是true則test1先觸發(fā),如果userCapture是false則test2先觸發(fā)。
下面來(lái)說(shuō)一下,attachEvent
這個(gè)沒(méi)啥好說(shuō)的,相信大家也都用的挺熟的,主要是傳參那塊,等我用到 再說(shuō)吧,哈哈哈
示例:
創(chuàng)建綁定方法:
復(fù)制代碼 代碼如下:
if (typeof document.addEventListener != "undefined") {
document.addEventListener("mousedown",_lhlclick,true);
} else {
document.attachEvent("onmousedown",_lhlclick);
}
刪除事件:
復(fù)制代碼 代碼如下:
if (typeof document.addEventListener != "undefined") {
document.removeEventListener("mousedown",_lhlclick,true);
} else {
document.detachEvent("onmousedown",_lhlclick);
}
您可能感興趣的文章:
- js中onclick和addEventListener的區(qū)別
- js中onclick和addEventListener的區(qū)別詳解
- Js on及addEventListener原理用法區(qū)別解析
- js中addEventListener()與removeEventListener()用法案例分析
- JavaScript使用addEventListener添加事件監(jiān)聽用法實(shí)例
- window.addEventListener來(lái)解決讓一個(gè)js事件執(zhí)行多個(gè)函數(shù)
- Javascript 的addEventListener()及attachEvent()區(qū)別分析
- JS中addEventListener的使用示例詳解
相關(guān)文章
javascript 字符 Escape,encodeURI,encodeURIComponent
下面是對(duì)字符串編碼轉(zhuǎn)換功能函數(shù)大家,大家可以根據(jù)實(shí)際需要選擇使用。2009-07-07
解決layer圖標(biāo)icon不加載的問(wèn)題
今天小編就為大家分享一篇解決layer圖標(biāo)icon不加載的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
談?wù)剬?duì)JavaScript原生拖放的深入理解
拖放(drag-and-drop,DnD)其實(shí)是兩個(gè)動(dòng)作——拖和放。所以,它涉及到兩個(gè)元素。一個(gè)是被拖的元素,稱為拖放源;另一個(gè)是要放的目標(biāo),稱為拖放目標(biāo)。本文將通過(guò)拆分這兩個(gè)概念來(lái)詳細(xì)介紹原生拖放,感興趣的朋友一起學(xué)習(xí)吧2016-09-09
javascript中數(shù)組的定義及使用實(shí)例
這篇文章主要介紹了javascript中數(shù)組的定義及使用方法,實(shí)例分析了數(shù)組的定義及使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
用VsCode編輯TypeScript的實(shí)現(xiàn)方法
這篇文章主要介紹了用VsCode編輯TypeScript的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05

