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事件串连执行多个处理过程的方法
Mar 09 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
javascript 面向对象 function类
2010/05/13 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
json跨域调用python的方法详解
2017/01/11 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Python sys模块常用方法解析
2020/02/20 Python
python 实现逻辑回归
2020/12/30 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
师范生自荐信模板
2014/05/28 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
捐书仪式主持词
2015/07/04 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS