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 相关文章推荐
javascript forEach通用循环遍历方法
Oct 11 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
微信小程序实现刷脸登录
May 25 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
用vite搭建vue3应用的实现方法
Feb 22 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正则提取或替换img标记属性
2013/06/26 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
python添加菜单图文讲解
2019/06/04 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
Django app配置多个数据库代码实例
2019/12/17 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
解决python运行效率不高的问题
2020/07/20 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
如何将整数int转换成字串String
2014/03/21 面试题
2014预备党员党课学习心得范文
2014/07/08 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
民间借贷协议书范本
2014/10/01 职场文书
青岛海底世界导游词
2015/02/11 职场文书
PHP策略模式写法
2021/04/01 PHP
python爬取豆瓣电影TOP250数据
2021/05/23 Python