onclick与listeners的执行先后问题详细解剖

 更新时间:2013年01月07日 12:10:44   作者:  
javascript中onclick与listeners的执行先后问题一直都是大家所疑惑的地方,接下来将为大家解决此疑惑,感兴趣的朋友可以了解下哦
以下代码,会先执行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版)

    仿豆瓣分页原型(Javascript版)...
    2007-04-04
  • JavaScript中Promise处理异步的并行与串行

    JavaScript中Promise处理异步的并行与串行

    js中的promise是一个异步编程的解决方案,语法层面上他是一个构造函数,名字为Promise(),下面这篇文章主要给大家介绍了关于JavaScript中Promise处理异步的并行与串行的相关资料,需要的朋友可以参考下
    2022-12-12
  • javascript在网页中实现读取剪贴板粘贴截图功能

    javascript在网页中实现读取剪贴板粘贴截图功能

    这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图、旺旺截图或者其它截图软件,需要的朋友可以参考下
    2014-06-06
  • 谷歌浏览器调试JavaScript小技巧

    谷歌浏览器调试JavaScript小技巧

    这篇文章主要介绍了谷歌浏览器调试JavaScript小技巧,需要的朋友可以参考下
    2014-12-12
  • JavaScript面试出现频繁的一些易错点整理

    JavaScript面试出现频繁的一些易错点整理

    通过几个常见面试开始,讨论针对一个题目的分析思路,就有了下面这篇文章,本文主要给大家整理总结介绍了关于JavaScript面试中会频繁出现的一些易错点,对大家具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧。
    2018-03-03
  • JavaScript实现的前端AES加密解密功能【基于CryptoJS】

    JavaScript实现的前端AES加密解密功能【基于CryptoJS】

    这篇文章主要介绍了JavaScript实现的前端AES加密解密功能,涉及javascript基于CryptoJS插件进行AES加密解密操作相关实现技巧,需要的朋友可以参考下
    2018-08-08
  • uniapp中scroll-view基础用法示例代码

    uniapp中scroll-view基础用法示例代码

    我们在项目中往往都能遇到实现左右滑动跟上下滑动的需求,下面这篇文章主要给大家介绍了关于uniapp中scroll-view基础用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 关于JavaScript实现动画时动画抖动的原因与解决方法

    关于JavaScript实现动画时动画抖动的原因与解决方法

    最近在使用JS动画做一些练习的时候我发现在动画执行时间内快速移开鼠标时会出现动画因鼠标移动过快从而导致代码冲突让画面抖动的bug,这篇文章主要给大家介绍了关于JavaScript实现动画时动画抖动的原因与解决方法,需要的朋友可以参考下
    2022-06-06
  • JavaScript 箭头函数的特点、与普通函数的区别

    JavaScript 箭头函数的特点、与普通函数的区别

    这篇文章主要介绍了JavaScript 箭头函数的特点、与普通函数的区别,很多情况下,箭头函数和函数表达式创建的函数并无区别,只有写法上的不同,本文第二块内容将介绍箭头函数和普通函数功能上的区别,感兴趣的朋友跟随小编一起看看吧
    2021-11-11
  • js+css实现tab菜单切换效果的方法

    js+css实现tab菜单切换效果的方法

    这篇文章主要介绍了js+css实现tab菜单切换效果的方法,以实例形式完整讲述了css与js的实现代码,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01

最新评论