JS中dom0級(jí)事件和dom2級(jí)事件的區(qū)別介紹
dom0級(jí)事件
<a href="#" id="hash" onclick="fn();fn();"> <button type="button">返回上面進(jìn)行開(kāi)通</button> </a> var btn=$('#hash').get(); btn.onclick=function(){ alert(''); }; btn.onclick=function(){ alert(''); };
像上面把onclick寫(xiě)在標(biāo)簽內(nèi),都是dom0級(jí)事件,fn和fn1依次執(zhí)行; 第二種獲取元素,綁定onclick事件也是dom0級(jí),第二個(gè)會(huì)覆蓋第一個(gè)onclick,也會(huì)覆蓋行內(nèi)的onclick,只會(huì)彈出222。
dom2級(jí)事件
$('#hash').click(function(){ alert('jq的dom2級(jí)點(diǎn)擊第一次') }); $('#hash').click(function(){ alert('jq的dom2級(jí)點(diǎn)擊第二次') }); btn.addEventListener('click',function(){ alert('原生dom2級(jí)第一次click') },false); btn.addEventListener('click',function(){ alert('原生dom2級(jí)第二次click') },false)
以上的綁定都屬于dom2級(jí)事件綁定,前面兩種都是jq的綁定方式,后面都是原生js的綁定方式,不會(huì)覆蓋,會(huì)依次執(zhí)行jq的綁定方法和原生的綁定方法,這就是于dom0級(jí)的去別處;
dom0和dom2共存
<a href="#" id="hash" onclick="fn();fn1();"> <button type="button">返回上面進(jìn)行開(kāi)通</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級(jí)點(diǎn)擊第一次') }); btn.addEventListener('click',function(){ alert('原生dom2級(jí)第一次click') },false); </script>
上面的例子有一個(gè)兩個(gè)dom0級(jí)和兩個(gè)dom3級(jí)綁定事件,js里面寫(xiě)的dom0級(jí)會(huì)覆蓋行內(nèi)的fn和fn1方法,但是js里面的dom0可以喝dom2共存,結(jié)果是彈出111 jq的dom2級(jí)點(diǎn)擊第一次 原生dom2級(jí)第一次click;
以上內(nèi)容是小編給大家?guī)?lái)的JS中dom0級(jí)事件和dom2級(jí)事件的區(qū)別介紹 ,希望對(duì)大家有所幫助,同時(shí)也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 一些主流JS框架中DOMReady事件的實(shí)現(xiàn)小結(jié)
- JavaScript DOM 添加事件
- Javascript Event事件中IE與標(biāo)準(zhǔn)DOM的比較
- javascript 刪除dom對(duì)象的事件函數(shù)代碼
- DOM3中的js textInput文本事件
- JS、CSS以及img對(duì)DOMContentLoaded事件的影響
- Javascript封裝DOMContentLoaded事件實(shí)例
- JavaScript DOM事件(筆記)
- 關(guān)于javascript DOM事件模型的兩件事
- js學(xué)習(xí)總結(jié)之dom2級(jí)事件基礎(chǔ)知識(shí)詳解
相關(guān)文章
微信小程序?qū)崿F(xiàn)簡(jiǎn)單評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單評(píng)論功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11js自動(dòng)生成的元素與頁(yè)面原有元素發(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ù)的過(guò)程2014-09-09JS實(shí)現(xiàn)逐頁(yè)將PDF文件轉(zhuǎn)為圖片格式
這篇文章主要為大家分享了如何通過(guò)前端js將pdf文件轉(zhuǎn)為圖片格式,并且支持翻頁(yè)預(yù)覽、以及圖片打包下載,文中的示例代碼簡(jiǎn)潔易懂,需要的可以參考一下2023-05-05IE8 引入跨站數(shù)據(jù)獲取功能說(shuō)明
今天看了一下msdn文檔,發(fā)現(xiàn)IE8打算增加 XDomainRequest (http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx) 跨站數(shù)據(jù)獲取的接口2008-07-07原生JavaScript實(shí)現(xiàn)貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)貪吃蛇游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11c#和Javascript操作同一json對(duì)象的實(shí)現(xiàn)代碼
剛開(kāi)始學(xué)Javascript,接觸到j(luò)son對(duì)象,json可以看作是用于客戶端數(shù)據(jù)實(shí)體對(duì)象的載體。json對(duì)象一般都是通過(guò)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)與返回和刷新頁(yè)面的實(shí)例代碼
這篇文章主要介紹了javascript跳轉(zhuǎn)與返回和刷新頁(yè)面的實(shí)例代碼,簡(jiǎn)單介紹了javascript中window.open()與window.location.href的區(qū)別,感興趣的朋友一起看看吧2019-11-11