JS中dom0級事件和dom2級事件的區(qū)別介紹
dom0級事件
<a href="#" id="hash" onclick="fn();fn();"> <button type="button">返回上面進(jìn)行開通</button> </a> var btn=$('#hash').get(); btn.onclick=function(){ alert(''); }; btn.onclick=function(){ alert(''); };
像上面把onclick寫在標(biāo)簽內(nèi),都是dom0級事件,fn和fn1依次執(zhí)行; 第二種獲取元素,綁定onclick事件也是dom0級,第二個(gè)會(huì)覆蓋第一個(gè)onclick,也會(huì)覆蓋行內(nèi)的onclick,只會(huì)彈出222。
dom2級事件
$('#hash').click(function(){ alert('jq的dom2級點(diǎn)擊第一次') }); $('#hash').click(function(){ alert('jq的dom2級點(diǎn)擊第二次') }); btn.addEventListener('click',function(){ alert('原生dom2級第一次click') },false); btn.addEventListener('click',function(){ alert('原生dom2級第二次click') },false)
以上的綁定都屬于dom2級事件綁定,前面兩種都是jq的綁定方式,后面都是原生js的綁定方式,不會(huì)覆蓋,會(huì)依次執(zhí)行jq的綁定方法和原生的綁定方法,這就是于dom0級的去別處;
dom0和dom2共存
<a href="#" id="hash" onclick="fn();fn1();"> <button type="button">返回上面進(jìn)行開通</button> </a> <script type="text/javascript"> function fn(){ alert('ade'); } function fn1(){ alert('ade111'); } var btn=$('#hash').get(0); btn.onclick=function(){ alert('111'); }; $('#hash').click(function(){ alert('jq的dom2級點(diǎn)擊第一次') }); btn.addEventListener('click',function(){ alert('原生dom2級第一次click') },false); </script>
上面的例子有一個(gè)兩個(gè)dom0級和兩個(gè)dom3級綁定事件,js里面寫的dom0級會(huì)覆蓋行內(nèi)的fn和fn1方法,但是js里面的dom0可以喝dom2共存,結(jié)果是彈出111 jq的dom2級點(diǎn)擊第一次 原生dom2級第一次click;
以上內(nèi)容是小編給大家?guī)淼腏S中dom0級事件和dom2級事件的區(qū)別介紹 ,希望對大家有所幫助,同時(shí)也非常感謝大家對腳本之家網(wǎng)站的支持!
- 一些主流JS框架中DOMReady事件的實(shí)現(xiàn)小結(jié)
- JavaScript DOM 添加事件
- Javascript Event事件中IE與標(biāo)準(zhǔn)DOM的比較
- javascript 刪除dom對象的事件函數(shù)代碼
- DOM3中的js textInput文本事件
- JS、CSS以及img對DOMContentLoaded事件的影響
- Javascript封裝DOMContentLoaded事件實(shí)例
- JavaScript DOM事件(筆記)
- 關(guān)于javascript DOM事件模型的兩件事
- js學(xué)習(xí)總結(jié)之dom2級事件基礎(chǔ)知識(shí)詳解
相關(guān)文章
js自動(dòng)生成的元素與頁面原有元素發(fā)生堆疊的解決方法
商品屬性和商品規(guī)格是js動(dòng)態(tài)生成的元素,商品擴(kuò)展信息的兩個(gè)文本框是原有的元素,他們發(fā)生堆疊,下面是一些解決思路2014-09-09javascript使用正則獲取url上的某個(gè)參數(shù)
使用indexOf取得?之后的參數(shù),以&使split進(jìn)行分割成數(shù)組,下面展示了一個(gè)從url上獲取名為MenuCode參數(shù)的過程2014-09-09JS實(shí)現(xiàn)逐頁將PDF文件轉(zhuǎn)為圖片格式
這篇文章主要為大家分享了如何通過前端js將pdf文件轉(zhuǎn)為圖片格式,并且支持翻頁預(yù)覽、以及圖片打包下載,文中的示例代碼簡潔易懂,需要的可以參考一下2023-05-05原生JavaScript實(shí)現(xiàn)貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)貪吃蛇游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11c#和Javascript操作同一json對象的實(shí)現(xiàn)代碼
剛開始學(xué)Javascript,接觸到j(luò)son對象,json可以看作是用于客戶端數(shù)據(jù)實(shí)體對象的載體。json對象一般都是通過ajax方式傳送給服務(wù)層2012-01-01JS數(shù)組方法shift()、unshift()用法實(shí)例分析
這篇文章主要介紹了JS數(shù)組方法shift()、unshift()用法,結(jié)合實(shí)例形式分析了JavaScript數(shù)組shift()與unshift()方法功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-01-01javascript跳轉(zhuǎn)與返回和刷新頁面的實(shí)例代碼
這篇文章主要介紹了javascript跳轉(zhuǎn)與返回和刷新頁面的實(shí)例代碼,簡單介紹了javascript中window.open()與window.location.href的區(qū)別,感興趣的朋友一起看看吧2019-11-11