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 相关文章推荐
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
js实现小时钟效果
Mar 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
mysql建立外键
2006/11/25 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
python安装oracle扩展及数据库连接方法
2017/02/21 Python
深入理解Python中的内置常量
2017/05/20 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python中函数参数匹配模型详解
2019/06/09 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
家长写给老师的建议书
2014/03/13 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2014年施工员工作总结
2014/11/18 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫