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 相关文章推荐
js中将字符串转换成json的三种方式
Jan 12 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
jquery实现pager控件示例
Apr 09 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
详解JavaScript 异步编程
Jul 13 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/03/17 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
javascript 写类方式之四
2009/07/05 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
Python numpy 常用函数总结
2017/12/07 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
python实现猜数字小游戏
2020/03/24 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
Python基于当前时间批量创建文件
2020/05/07 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
简历自荐信
2013/12/02 职场文书
求职信范文怎么写
2014/01/29 职场文书
小学评语大全
2014/04/22 职场文书
行政监察建议书
2014/05/19 职场文书
护理专业求职信
2014/06/15 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技