标签：
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
事件捕获：不太具体的节点应该更早的接收到事件，而最具体的节点应该最后接收到事件；（DOM2规范要求从document开始传播，但是浏览器从window对象开始传播）
事件冒泡：最具体的节点先接收到事件，然后逐级向上传播到较为不具体的节点
接下来我用一个代码给大家演示一下DOM流的事件传递流程：
1 <body> 2 <div id="test1"> 3 1 4 <div id="test2"> 5 2 6 <div id="test3"> 7 3 8 </div> 9 </div> 10 </div> 11 <script type="text/javascript"> 12 document.getElementById("test2").addEventListener(‘click‘,function(){alert("冒泡p2");},false); 13 document.getElementById("test3").addEventListener(‘click‘,function(){alert("冒泡p3");},false); 14 document.getElementById("test1").addEventListener(‘click‘,function(){alert("冒泡p1");},false); 15 document.getElementById("test1").addEventListener(‘click‘,function(){alert("捕获p1");},true); 16 document.getElementById("test2").addEventListener(‘click‘,function(){alert("捕获p2");},true); 17 document.getElementById("test3").addEventListener(‘click‘,function(){alert("捕获p3");},true); 18 19 </script> 20 </body>
设置的监听器中同时包含了事件捕获监听器和冒泡监听器，点击div id=“test3”后依次显示：
捕获p1->捕获p2->冒泡p3->捕获p3->冒泡p2->冒泡p1
我查阅了《javascript高级程序设计》书中写的执行顺序如下：
点击test3后：
1、“事件捕获”阶段，事件捕获阶段中实际的目标不会接收到事件；
2、“实际目标”阶段，事件在<div id="test3"></div>上发生，并在事件处理中，看做冒泡阶段的一部分；
3、“冒泡阶段”，事件又传播回文档
ps：特别注意，即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件目标，但是现在大多浏览器都会在捕获阶段触发事件对象上的事件；
power by 西南科技大学---wutian
标签：
原文地址：http://www.cnblogs.com/smart-tian/p/4623065.html
