onclick與listeners的執(zhí)行先后問(wèn)題詳細(xì)解剖
更新時(shí)間：2013年01月07日 12:10:44 作者：
javascript中onclick與listeners的執(zhí)行先后問(wèn)題一直都是大家所疑惑的地方，接下來(lái)將為大家解決此疑惑，感興趣的朋友可以了解下哦
以下代碼，會(huì)先執(zhí)行onclick，然后再執(zhí)行事件監(jiān)控：
<HTML>
<HEAD>
<TITLE>JK Test</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<script src="http://s0.qhimg.com/lib/qwrap/110.js" type="text/javascript"></script>
<style>
div{border:1px solid balck;padding:5px;margin:2px;}
</style>
</HEAD>
<body>
<div id="div1" onclick="alert(1);" >div1 原生的fireEvent，是先運(yùn)行onclick，再運(yùn)行l(wèi)isteners
</div>
</body>
<script type="text/javascript">
var fun=function(e){
alert('hello');
};
W('#div1').addEventListener('click',fun).fire('click'); //QW里調(diào)用的是原生方法
</script>
</HTML>
JQuery的執(zhí)行順序恰恰相反：
<HTML>
<HEAD>
<TITLE>JK Test</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<script src="http://s0.qhimg.com/lib/jquery/172.js" type="text/javascript"></script>
<style>
div{border:1px solid balck;padding:5px;margin:2px;}
</style>
</HEAD>
<body>
<div id="div2" onclick="alert(2);" >div2 JQuery，先運(yùn)行l(wèi)isteners，再運(yùn)行onclick
</div>
</body>
<script type="text/javascript">
var fun=function(e){
alert('hello');
};
$('#div2').bind('click',fun).trigger('click');
</script>
</HTML>
掃了一下jq的trigger的實(shí)現(xiàn)，也沒(méi)弄明白顛倒的目的是什么。
復(fù)制代碼 代碼如下:
<HTML>
<HEAD>
<TITLE>JK Test</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<script src="http://s0.qhimg.com/lib/qwrap/110.js" type="text/javascript"></script>
<style>
div{border:1px solid balck;padding:5px;margin:2px;}
</style>
</HEAD>
<body>
<div id="div1" onclick="alert(1);" >div1 原生的fireEvent，是先運(yùn)行onclick，再運(yùn)行l(wèi)isteners
</div>
</body>
<script type="text/javascript">
var fun=function(e){
alert('hello');
};
W('#div1').addEventListener('click',fun).fire('click'); //QW里調(diào)用的是原生方法
</script>
</HTML>
JQuery的執(zhí)行順序恰恰相反：
復(fù)制代碼 代碼如下:
<HTML>
<HEAD>
<TITLE>JK Test</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<script src="http://s0.qhimg.com/lib/jquery/172.js" type="text/javascript"></script>
<style>
div{border:1px solid balck;padding:5px;margin:2px;}
</style>
</HEAD>
<body>
<div id="div2" onclick="alert(2);" >div2 JQuery，先運(yùn)行l(wèi)isteners，再運(yùn)行onclick
</div>
</body>
<script type="text/javascript">
var fun=function(e){
alert('hello');
};
$('#div2').bind('click',fun).trigger('click');
</script>
</HTML>
掃了一下jq的trigger的實(shí)現(xiàn)，也沒(méi)弄明白顛倒的目的是什么。
您可能感興趣的文章:
相關(guān)文章
仿豆瓣分頁(yè)原型(Javascript版)...2007-04-04
js中的promise是一個(gè)異步編程的解決方案,語(yǔ)法層面上他是一個(gè)構(gòu)造函數(shù),名字為Promise(),下面這篇文章主要給大家介紹了關(guān)于JavaScript中Promise處理異步的并行與串行的相關(guān)資料,需要的朋友可以參考下2022-12-12
javascript在網(wǎng)頁(yè)中實(shí)現(xiàn)讀取剪貼板粘貼截圖功能
這篇文章主要介紹了在網(wǎng)頁(yè)中實(shí)現(xiàn)讀取剪貼板粘貼截圖功能,即可以把剪貼板的截圖Ctrl+V粘貼到網(wǎng)頁(yè)的一個(gè)輸入框中,例如QQ截圖、旺旺截圖或者其它截圖軟件,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了谷歌瀏覽器調(diào)試JavaScript小技巧,需要的朋友可以參考下2014-12-12
JavaScript面試出現(xiàn)頻繁的一些易錯(cuò)點(diǎn)整理
通過(guò)幾個(gè)常見(jiàn)面試開(kāi)始,討論針對(duì)一個(gè)題目的分析思路，就有了下面這篇文章，本文主要給大家整理總結(jié)介紹了關(guān)于JavaScript面試中會(huì)頻繁出現(xiàn)的一些易錯(cuò)點(diǎn)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧。2018-03-03
JavaScript實(shí)現(xiàn)的前端AES加密解密功能【基于CryptoJS】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的前端AES加密解密功能,涉及javascript基于CryptoJS插件進(jìn)行AES加密解密操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
uniapp中scroll-view基礎(chǔ)用法示例代碼
我們?cè)陧?xiàng)目中往往都能遇到實(shí)現(xiàn)左右滑動(dòng)跟上下滑動(dòng)的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp中scroll-view基礎(chǔ)用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
關(guān)于JavaScript實(shí)現(xiàn)動(dòng)畫(huà)時(shí)動(dòng)畫(huà)抖動(dòng)的原因與解決方法
最近在使用JS動(dòng)畫(huà)做一些練習(xí)的時(shí)候我發(fā)現(xiàn)在動(dòng)畫(huà)執(zhí)行時(shí)間內(nèi)快速移開(kāi)鼠標(biāo)時(shí)會(huì)出現(xiàn)動(dòng)畫(huà)因鼠標(biāo)移動(dòng)過(guò)快從而導(dǎo)致代碼沖突讓畫(huà)面抖動(dòng)的bug,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)動(dòng)畫(huà)時(shí)動(dòng)畫(huà)抖動(dòng)的原因與解決方法,需要的朋友可以參考下2022-06-06
JavaScript 箭頭函數(shù)的特點(diǎn)、與普通函數(shù)的區(qū)別
這篇文章主要介紹了JavaScript 箭頭函數(shù)的特點(diǎn)、與普通函數(shù)的區(qū)別,很多情況下，箭頭函數(shù)和函數(shù)表達(dá)式創(chuàng)建的函數(shù)并無(wú)區(qū)別，只有寫(xiě)法上的不同，本文第二塊內(nèi)容將介紹箭頭函數(shù)和普通函數(shù)功能上的區(qū)別，感興趣的朋友跟隨小編一起看看吧2021-11-11
js+css實(shí)現(xiàn)tab菜單切換效果的方法
這篇文章主要介紹了js+css實(shí)現(xiàn)tab菜單切換效果的方法,以實(shí)例形式完整講述了css與js的實(shí)現(xiàn)代碼,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01