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 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
vue实现微信获取用户信息的方法
Mar 21 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
小程序实现tab标签页
Nov 16 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运行环境配置的详解
2013/06/04 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
ES6中字符串的使用方法扩展
2019/06/04 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
Python中请使用isinstance()判断变量类型
2014/08/25 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
python中for in的用法详解
2020/04/17 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
中专毕业生自荐信范文
2013/11/28 职场文书
客服文员岗位职责
2013/11/29 职场文书
副厂长岗位职责
2014/02/02 职场文书
企业元宵节主持词
2014/03/25 职场文书
校园活动策划方案
2014/06/13 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
南极大冒险观后感
2015/06/05 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
七年级作文之秋游
2019/10/21 职场文书