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 相关文章推荐
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
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实现单链表的实例代码
2013/03/22 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
python发布模块的步骤分享
2014/02/21 Python
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
python pandas生成时间列表
2019/06/29 Python
Python列表切片常用操作实例解析
2019/12/16 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
事业单位分类改革实施方案
2014/03/21 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
思想道德自我评价2015
2015/03/09 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
神州牡丹园的导游词
2019/11/20 职场文书