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