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自带函数备忘 数组
Dec 29 Javascript
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
vue proxy 的优势与使用场景实现
Jun 15 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
php判断电脑访问、手机访问的例子
2014/05/10 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
PHP实现的日历功能示例
2018/09/01 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
python字符串string的内置方法实例详解
2018/05/14 Python
python 字符串只保留汉字的方法
2018/11/16 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
python实现画循环圆
2019/11/23 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
大学在校生求职信范文
2013/11/21 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
生态养殖创业计划书
2014/05/06 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
2015年学校党建工作总结
2015/05/19 职场文书