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

2024-05-06 14:20:06

字體：大中小

來源：轉載

供稿：網(wǎng)友

以下代碼，會先執(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)，也沒弄明白顛倒的目的是什么。

上一篇：YUI Compressor壓縮JavaScript原理及微優(yōu)化

下一篇：javascript parseInt() 函數(shù)的進制轉換注意細節(jié)