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


Posted in Javascript onJanuary 07, 2013

以下代码,会先执行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的实现,也没弄明白颠倒的目的是什么。
Javascript 相关文章推荐
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 #Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 #Javascript
jQuery插件开发基础简单介绍
Jan 07 #Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 #Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 #Javascript
jquery入门—访问DOM对象方法
Jan 07 #Javascript
jQuery.clean使用方法及思路分析
Jan 07 #Javascript
You might like
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
python比较两个列表大小的方法
2015/07/11 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
Python的log日志功能及设置方法
2019/07/11 Python
Python实现数值积分方式
2019/11/20 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
护士自荐信
2013/10/25 职场文书
简历上的自我评价
2014/02/03 职场文书
街道务虚会发言材料
2014/10/20 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
优秀党支部申报材料
2014/12/24 职场文书
2015年教研员工作总结
2015/05/26 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
Python合并pdf文件的工具
2021/07/01 Python