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 相关文章推荐
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
如何在JavaScript中等分数组的实现
Dec 13 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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
php实现socket推送技术的示例
2017/12/20 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
如何将python中的List转化成dictionary
2016/08/15 Python
Python import与from import使用及区别介绍
2018/09/06 Python
Python制作exe文件简单流程
2019/01/24 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
年度评优评先方案
2014/06/03 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL