快捷導(dǎo)航

onclick與listeners的執(zhí)行先后問題詳細(xì)解剖

更新時(shí)間：2013年01月07日 12:10:44 作者：

javascript中onclick與listeners的執(zhí)行先后問題一直都是大家所疑惑的地方，接下來將為大家解決此疑惑，感興趣的朋友可以了解下哦

以下代碼，會(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í)行順序恰恰相反：

復(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)，也沒弄明白顛倒的目的是什么。

您可能感興趣的文章:

淺談onTouch先執(zhí)行,還是onClick執(zhí)行(詳解)

相關(guān)文章

JS/jQuery實(shí)現(xiàn)超簡(jiǎn)單的Table表格添加,刪除行功能示例
這篇文章主要介紹了JS/jQuery實(shí)現(xiàn)超簡(jiǎn)單的Table表格添加,刪除行功能,結(jié)合實(shí)例形式詳細(xì)分析了JS與jQuery針對(duì)Table表格添加,刪除行功能的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-07-07
JS克隆，屬性，數(shù)組，對(duì)象，函數(shù)實(shí)例分析
這篇文章主要介紹了JS克隆，屬性，數(shù)組，對(duì)象，函數(shù),結(jié)合實(shí)例形式分析了javascript中面向?qū)ο蟪绦蛟O(shè)計(jì)相關(guān)的對(duì)象、屬性、函數(shù)及數(shù)組等相關(guān)技巧,需要的朋友可以參考下
2016-11-11
JavaScript數(shù)組實(shí)例的9個(gè)方法
這篇文章主要介紹了JavaScript數(shù)組實(shí)例的9個(gè)方法,文章圍繞主題展開詳細(xì)的內(nèi)容介紹沒具有一定的參考價(jià)值，需要的朋友可以參考一下
2022-07-07
JS+HTML5 Canvas實(shí)現(xiàn)簡(jiǎn)單的寫字板功能示例
這篇文章主要介紹了JS+HTML5 Canvas實(shí)現(xiàn)簡(jiǎn)單的寫字板功能,結(jié)合實(shí)例形式分析了js結(jié)合HTML5 canvas特性的圖形繪制相關(guān)操作技巧,需要的朋友可以參考下
2018-08-08
原生js實(shí)現(xiàn)自定義難度的掃雷游戲
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)自定義難度的掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
JS獲取鼠標(biāo)選中的文字
下面是小編給大家分享的js獲取鼠標(biāo)選中的文字和js獲取鼠標(biāo)選中的值關(guān)鍵代碼，大家如果有需要可以參考下
2016-08-08
一個(gè)簡(jiǎn)易時(shí)鐘效果js實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了一個(gè)簡(jiǎn)易時(shí)鐘效果js實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
js調(diào)試系列斷點(diǎn)與動(dòng)態(tài)調(diào)試[基礎(chǔ)篇]
上幾篇文章已經(jīng)為大家介紹了js調(diào)試系列的一些基礎(chǔ)知識(shí)，支持亂碼兄弟為大家?guī)砹薺s斷點(diǎn)與動(dòng)態(tài)調(diào)試方法，需要的朋友可以參考下
2014-06-06
詳解a++和++a的區(qū)別
搞開發(fā)已經(jīng)很久了，一直搞不懂a(chǎn)++和++a到底有所什么不同，后來通過查閱相關(guān)資料總結(jié)出一點(diǎn)規(guī)律，下面小編通過本文給大家介紹
2017-08-08
微信小程序h5頁面跳轉(zhuǎn)小程序的超詳細(xì)講解
開發(fā)中涉及到一個(gè)需求,就是從一個(gè)預(yù)約票購買的頁面需要跳轉(zhuǎn)到?小程序,下面這篇文章主要給大家介紹了關(guān)于微信小程序h5頁面跳轉(zhuǎn)小程序的超詳細(xì)講解,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02