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 相关文章推荐
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
详解JS预解析原理
Jun 16 Javascript
js实现碰撞检测
Jan 29 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 裁剪图片成固定大小代码方法
2009/09/09 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python清理子进程机制剖析
2017/11/23 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
大专生毕业的自我评价
2014/02/06 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
2014年变电站工作总结
2014/12/19 职场文书
初中差生评语
2014/12/29 职场文书
导游词范文
2015/02/13 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python