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 相关文章推荐
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
jQuery设计思想
Mar 07 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 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 google或baidu分页代码
2009/11/26 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
js实现验证码功能
2020/07/24 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
Python 常用的安装Module方式汇总
2017/05/06 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
python银行系统实现源码
2019/10/25 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
如何用Python 加密文件
2020/09/10 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
SQL Server面试题
2016/10/17 面试题
五一活动标语
2014/06/30 职场文书
转学证明范本
2015/06/19 职场文书
暑假生活随笔
2015/08/15 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang
《废话连篇——致新手》——chinapizza
2022/04/05 无线电