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的实现，也没弄明白颠倒的目的是什么。

　　推荐阅读

　　jquery Mobile入门—外部链接切换示例代码

1、内部链接是通过在<a>标签内将href属性值设为#+id的形式，外链则是在<a>中增加rel属性，并将属性值设为external，如：<a href="about.html" rel="external">3i Studio</a> 2、外部链接切换示例代码：复制代码代>>>详细阅读

本文标题：onclick与listeners的执行先后问题详细解剖

地址：http://www.17bianji.com/kaifa2/JS/22558.html

1/2 1