本文通过代码示例对比了原生JavaScript与jQuery在触发点击事件时,内联onclick属性与通过addEventListener绑定的监听器之间的执行先后顺序。结果显示,原生方法先执行onclick再执行监听器,而jQuery的trigger方法则相反。文章提供了具体测试代码及简要分析,帮助开发者理解不同框架下的事件处理差异。
原生JavaScript事件执行顺序测试
示例代码如下:
<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的执行顺序恰好与上述原生情况相反。:
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> 执行顺序差异分析
简要查看了jQuery中trigger方法的实现逻辑,尚不清楚将其执行顺序颠倒的具体设计目的。