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类(纯JS, Ajax模式)
Mar 12 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 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警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python实现RSA加密(解密)算法
2016/02/17 Python
Python 序列的方法总结
2016/10/18 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
Python 学习教程之networkx
2019/04/15 Python
python生成特定分布数的实例
2019/12/05 Python
python numpy库np.percentile用法说明
2020/06/08 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
医药营销个人求职信范文
2014/02/07 职场文书
反邪教警示教育方案
2014/05/13 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
公司承诺书怎么写
2014/05/24 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
法定代表人证明书
2014/11/28 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
Python 发送SMTP邮件的简单教程
2021/06/24 Python
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL