方式1、方式2和方式3都不能实现事件的重复绑定，所以自然也就不存在执行顺序的问题。方式4和方式5可以重复绑定特性，所以需要了解下执行顺序的问题。如果你写出依赖于执行顺序的代码，可以断定你的设计存在问题。所以下面的顺序问题，仅作为兴趣探讨，没有什么实际意义。直接上结论：addEventListener和attachEvent表现一致,如果给同一个事件绑定多个处理函数，先绑定的先执行。下面的代码我在IE11、FF17和Chrome39都测试过。
<script> window.onload = function(){ <span> </span>var outA = document.getElementById("outA"); outA.addEventListener('click',function(){alert(1);},false); outA.addEventListener('click',function(){alert(2);},true); outA.addEventListener('click',function(){alert(3);},true); outA.addEventListener('click',function(){alert(4);},true); }; </script> <body> <div> </div> </body>
当点击outA的时候，会依次打印出1、2、3、4。这里特别需要注意：我们给outA绑定了多个onclick事件处理函数，也是直接点击outA触发的事件，所以不涉及事件冒泡和事件捕获的问题，即addEventListener的第三个参数在这种场景下，没有什么用处。如果是通过事件冒泡或者是事件捕获触发outA的click事件，那么函数的执行顺序会有变化。
(三) 事件冒泡和事件捕获
事件冒泡和事件捕获很好理解，只不过是对同一件事情的不同看法，只不过这2种看法都很有道理。
我们知道HTML中的元素是可以嵌套的，形成类似于树的层次关系。比如下面的代码：
<div> <div> <div></div> </div> </div>
如果点击了最内侧的outC，那么外侧的outB和outC算不算被点击了呢？很显然算，不然就没有必要区分事件冒泡和事件捕获了，这一点各个浏览器厂家也没有什么疑义。假如outA、outB、outC都注册了click类型事件处理函数，当点击outC的时候，触发顺序是A-->B-->C，还是C-->B-->A呢？如果浏览器采用的是事件冒泡，那么触发顺序是C-->B-->A，由内而外，像气泡一样，从水底浮向水面；如果采用的是事件捕获，那么触发顺序是A-->B-->C，从上到下，像石头一样，从水面落入水底。
事件冒泡见下图：
事件捕获见下图：
一般来说事件冒泡机制，用的更多一些，所以在IE8以及之前，IE只支持事件冒泡。IE9+/FF/Chrome这2种模型都支持，可以通过addEventListener((type, listener, useCapture)的useCapture来设定，useCapture=false代表着事件冒泡，useCapture=true代表着采用事件捕获。
<script> window.onload = function(){ var outA = document.getElementById("outA"); var outB = document.getElementById("outB"); var outC = document.getElementById("outC"); // 使用事件冒泡 outA.addEventListener('click',function(){alert(1);},false); outB.addEventListener('click',function(){alert(2);},false); outC.addEventListener('click',function(){alert(3);},false); }; </script> <body> <div> <div> <div></div> </div> </div> </body>
使用的是事件冒泡，当点击outC的时候，打印顺序是3-->2-->1。如果将false改成true使用事件捕获，打印顺序是1-->2-->3。
(四) DOM事件流
DOM事件流我也不知道怎么解释，个人感觉就是事件冒泡和事件捕获的结合体，直接看图吧。
DOM事件流：将事件分为三个阶段：捕获阶段、目标阶段、冒泡阶段。先调用捕获阶段的处理函数，其次调用目标阶段的处理函数，最后调用冒泡阶段的处理函数。这个过程很类似于Struts2框中的action和Interceptor。当发出一个URL请求的时候，先调用前置拦截器，其次调用action，最后调用后置拦截器。
<script> window.onload = function(){ var outA = document.getElementById("outA"); var outB = document.getElementById("outB"); var outC = document.getElementById("outC"); // 目标(自身触发事件,是冒泡还是捕获无所谓) outC.addEventListener('click',function(){alert("target");},true); // 事件冒泡 outA.addEventListener('click',function(){alert("bubble1");},false); outB.addEventListener('click',function(){alert("bubble2");},false); // 事件捕获 outA.addEventListener('click',function(){alert("capture1");},true); outB.addEventListener('click',function(){alert("capture2");},true); }; </script> <body> <div> <div> <div></div> </div> </div> </body>