onclick與listeners的執(zhí)行先后問題詳細解剖
更新時間：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，是先運行onclick，再運行l(wèi)isteners
</div>
</body>
<script type="text/javascript">
var fun=function(e){
alert('hello');
};
W('#div1').addEventListener('click',fun).fire('click'); //QW里調用的是原生方法
</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，先運行l(wèi)isteners，再運行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)，也沒弄明白顛倒的目的是什么。
復制代碼 代碼如下:
<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，是先運行onclick，再運行l(wèi)isteners
</div>
</body>
<script type="text/javascript">
var fun=function(e){
alert('hello');
};
W('#div1').addEventListener('click',fun).fire('click'); //QW里調用的是原生方法
</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，先運行l(wèi)isteners，再運行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)，也沒弄明白顛倒的目的是什么。
您可能感興趣的文章:
相關文章
仿豆瓣分頁原型(Javascript版)...2007-04-04
js中的promise是一個異步編程的解決方案,語法層面上他是一個構造函數(shù),名字為Promise(),下面這篇文章主要給大家介紹了關于JavaScript中Promise處理異步的并行與串行的相關資料,需要的朋友可以參考下2022-12-12
javascript在網頁中實現(xiàn)讀取剪貼板粘貼截圖功能
這篇文章主要介紹了在網頁中實現(xiàn)讀取剪貼板粘貼截圖功能,即可以把剪貼板的截圖Ctrl+V粘貼到網頁的一個輸入框中,例如QQ截圖、旺旺截圖或者其它截圖軟件,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了谷歌瀏覽器調試JavaScript小技巧,需要的朋友可以參考下2014-12-12
JavaScript面試出現(xiàn)頻繁的一些易錯點整理
通過幾個常見面試開始,討論針對一個題目的分析思路，就有了下面這篇文章，本文主要給大家整理總結介紹了關于JavaScript面試中會頻繁出現(xiàn)的一些易錯點，對大家具有一定的參考學習價值，需要的朋友們下面隨著小編來一起看看吧。2018-03-03
JavaScript實現(xiàn)的前端AES加密解密功能【基于CryptoJS】
這篇文章主要介紹了JavaScript實現(xiàn)的前端AES加密解密功能,涉及javascript基于CryptoJS插件進行AES加密解密操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-08-08
我們在項目中往往都能遇到實現(xiàn)左右滑動跟上下滑動的需求,下面這篇文章主要給大家介紹了關于uniapp中scroll-view基礎用法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
關于JavaScript實現(xiàn)動畫時動畫抖動的原因與解決方法
最近在使用JS動畫做一些練習的時候我發(fā)現(xiàn)在動畫執(zhí)行時間內快速移開鼠標時會出現(xiàn)動畫因鼠標移動過快從而導致代碼沖突讓畫面抖動的bug,這篇文章主要給大家介紹了關于JavaScript實現(xiàn)動畫時動畫抖動的原因與解決方法,需要的朋友可以參考下2022-06-06
JavaScript 箭頭函數(shù)的特點、與普通函數(shù)的區(qū)別
這篇文章主要介紹了JavaScript 箭頭函數(shù)的特點、與普通函數(shù)的區(qū)別,很多情況下，箭頭函數(shù)和函數(shù)表達式創(chuàng)建的函數(shù)并無區(qū)別，只有寫法上的不同，本文第二塊內容將介紹箭頭函數(shù)和普通函數(shù)功能上的區(qū)別，感興趣的朋友跟隨小編一起看看吧2021-11-11
這篇文章主要介紹了js+css實現(xiàn)tab菜單切換效果的方法,以實例形式完整講述了css與js的實現(xiàn)代碼,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01