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 数组克隆方法 小结
Mar 20 Javascript
js parentElement和offsetParent之间的区别
Mar 23 Javascript
了解一点js的Eval函数
Jul 26 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
JS简单随机数生成方法
Sep 05 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
使用jQuery实现购物车
Oct 29 jQuery
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
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
php类自动加载器实现方法
2015/07/28 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
艺术系应届生的自我评价
2013/10/19 职场文书
中医药大学毕业生自荐信
2013/11/08 职场文书
制药工程专业毕业生推荐信
2013/12/24 职场文书
装修设计师求职信
2014/02/26 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
教师师德承诺书2016
2016/03/25 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
SQL基础的查询语句
2021/11/11 MySQL
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL