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