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 相关文章推荐
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
从表单校验看JavaScript策略模式的使用详解
Oct 17 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
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
django模板结构优化的方法
2019/02/28 Python
python文本数据处理学习笔记详解
2019/06/17 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
个人查摆剖析材料
2014/10/16 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
高中生毕业评语
2014/12/30 职场文书
优秀员工自荐书
2015/03/06 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
利用Redis实现点赞功能的示例代码
2022/06/28 Redis