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