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

时间:2020-05-13 人气:0

以下代码，会先执行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>

扫了一下jq的trigger的实现，也没弄明白颠倒的目的是什么。

加载全部内容