onclick与listeners的执行先后问题详细解剖

213 阅读 0 评论 141 点赞

我是靠谱客的博主魁梧悟空，最近开发中收集的这篇文章主要介绍onclick与listeners的执行先后问题详细解剖，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

以下代码，会先执行onclick，然后再执行事件监控：

复制代码代码如下:

 
<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，再运行listeners 
</div> 
</body> 
<script type="text/javascript"> 
var fun=function(e){ 
alert('hello'); 
}; 
W('#div1').addEventListener('click',fun).fire('click'); //QW里调用的是原生方法 
</script> 
</HTML> 

JQuery的执行顺序恰恰相反：

复制代码代码如下:

 
<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，先运行listeners，再运行onclick 
</div> 
</body> 
<script type="text/javascript"> 
var fun=function(e){ 
alert('hello'); 
}; 
$('#div2').bind('click',fun).trigger('click'); 
</script> 
</HTML> 