原生事件与jQuery中onclick和addEventListener执行顺序对比

作者:小圆点时间:2026-10-27 07:30:49浏览:422

本文通过代码示例对比了原生JavaScript与jQuery在触发点击事件时,内联onclick属性与通过addEventListener绑定的监听器之间的执行先后顺序。结果显示,原生方法先执行onclick再执行监听器,而jQuery的trigger方法则相反。文章提供了具体测试代码及简要分析,帮助开发者理解不同框架下的事件处理差异。

以下代码演示的情况是,先执行onclick,随后再执行事件监听器。:

原生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方法的实现逻辑,尚不清楚将其执行顺序颠倒的具体设计目的。

作者最新文章