listener的执行先后问题

20121010日添加： franky教主(http://www.cnblogs.com/_franky/)说在IE各个版本下，attachEvent执行顺序是乱序的（这里是乱序，不是随机）。在我的环境下没有重现，我需要进一步验证下

问题提出：

　　问题一：如果一个element同时绑定了onclick，并且添加了click的listener。哪个最先执行呢？

　　问题二：如果绑定了多个listener，那么执行顺序是按照添加顺序么

做了一些例子，得出结论如下，希望大家批评指正：

1）第一个问题，ie是onclick优先于listener，无论顺序；非ie浏览器是根据代码执行顺序进行触发。但是如果用jQuery的trigger，会发现jQuery人为的将onclick触发点放在listener之后（此处不解，具体事例可参照jk的文章的详细描述：http://www.cnblogs.com/jkisjk/archive/2012/04/08/the_order_of_onclick_and_listeners.html）

2）第二个问题，ie是按照最后添加的listener优先触发、倒序触发；其他浏览器则是按照addEventListener顺序，顺序触发。jQuery内部将ie的也统一成按照绑定顺序触发。

3）IE下测试验证

　　3-1)IE下listener的倒序执行示例

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE> @si test </TITLE>
 </HEAD>

 <BODY>
    <div id="div1" style="position:relative;200px;height:200px;background-color:green;left:100px;top:100px;">
        
    </div>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        var div1 = document.getElementById("div1");

        //*****1)添加onclick
        div1.onclick = function(){alert("fire onclick")};
        //*****2)给listener绑定click 1
        div1.attachEvent("onclick", function(){alert("fire listener click 1")});
        //*****3)给listener绑定click 2
        div1.attachEvent("onclick", function(){alert("fire listener click 2")});
　　　　　//*****4)触发
　　　　　div1.fireEvent("onclick");
    //-->
    </SCRIPT>
 </BODY>
</HTML>

执行顺序为：

　　fire onclick

　　fire listener click 2

　　fire listener click 1

　　3-2)IE下listener的onclick优先执行示例

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE> @si test </TITLE>
 </HEAD>

 <BODY>
    <div id="div1" style="position:relative;200px;height:200px;background-color:green;left:100px;top:100px;">
        
    </div>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        var div1 = document.getElementById("div1");

        //*****1)给listener绑定click 1
        div1.attachEvent("onclick", function(){alert("fire listener click 1")});

　　　　　//*****2)添加onclick
        div1.onclick = function(){alert("fire onclick")};

        //*****3)给listener绑定click 2
        div1.attachEvent("onclick", function(){alert("fire listener click 2")});
　　　　　//*****4)触发 　　　　　
　　　　　div1.fireEvent("onclick");     
　　//-->
    </SCRIPT>
 </BODY>
</HTML>

执行顺序为：

　　fire onclick

　　fire listener click 2

　　fire listener click 1

4）非IE下测试验证

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE> @si test </TITLE>
 </HEAD>

 <BODY>
    <div id="div1" style="position:relative;200px;height:200px;background-color:green;left:100px;top:100px;">
        
    </div>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        var div1 = document.getElementById("div1");

        
        //*****1)给listener绑定click 2
        div1.addEventListener("click", function(){alert("fire listener click 1")});
        //*****2)添加onclick
        div1.onclick = function(){alert("fire onclick")};
        //*****3)给listener绑定click 1
        div1.addEventListener("click", function(){alert("fire listener click 2")});
        //*****4)触发事件
        var e = document.createEvent('HTMLEvents');
        e.initEvent('click', true, true);
        div1.dispatchEvent(e);
    //-->
    </SCRIPT>
 </BODY>
</HTML>

执行顺序为：

　　fire listener click 1

　　fire onclick

　　fire listener click 2

4）jQuery1.7中onclick和listener测试验证

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE> @si test </TITLE>
  <script src="http://s0.qhimg.com/lib/jquery/172.js" type="text/javascript"></script> 
 </HEAD>

 <BODY>
    <div id="div1" style="position:relative;200px;height:200px;background-color:green;left:100px;top:100px;">
        
    </div>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        var div1 = document.getElementById("div1");

        //*****1)给listener绑定click 1
        $('#div1').bind('click',function(){alert("fire listener click 1")});
        //*****2)添加onclick
        div1.onclick = function(){alert("fire onclick")};
        //*****3)给listener绑定click 2
        $('#div1').bind('click',function(){alert("fire listener click 2")});

        $('#div1').trigger('click');
    //-->
    </SCRIPT>
 </BODY>
</HTML>

执行顺序为：

　　fire listener click 1

　　fire listener click 2

　　fire onclick