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 相关文章推荐
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
js实现搜索栏效果
Nov 16 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
js实现计时器秒表功能
Dec 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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
大家未必知道的Js技巧收藏
2008/04/07 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
17个Python小技巧分享
2015/01/23 Python
Python执行时间的计算方法小结
2017/03/17 Python
用python实现百度翻译的示例代码
2018/03/09 Python
Apache部署Django项目图文详解
2019/07/30 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
Python识别验证码的实现示例
2020/09/30 Python
python中pop()函数的语法与实例
2020/12/01 Python
django中cookiecutter的使用教程
2020/12/03 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
费用会计岗位职责
2014/01/01 职场文书
运动会800米加油稿
2014/02/22 职场文书
立志成才演讲稿
2014/09/04 职场文书
作风转变年心得体会
2014/10/22 职场文书
2014年维稳工作总结
2014/11/18 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
python之基数排序的实现
2021/07/26 Python
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL