有如下html
<ul>
<li>
<p>
<a href="javascript:;">click me</a>
</p>
</li>
</ul>
给每个节点都添加监听事件：
document.querySelector("ul").addEventListener("click",function (event) {
alert("this is ul");
},false);
document.querySelector("li").addEventListener("click",function (event) {
alert("this is li");
},false);
document.querySelector("p").addEventListener("click",function (event) {
alert("this is p");
},false);
document.querySelector("a").addEventListener("click",function (event) {
alert("this is a");
},false);
点击a标签，alert的顺序是 a、p、li、ul。
这是默认的冒泡方式。
如果将监听事件里的false改为true，
再点击a标签，alert的顺序为ul、li、p、a。
这就是事件捕获。
如果我们将li、a改为true，ul、p仍为false，
那么顺序是，li、a、p、ul。
我是这么理解的，执行顺序，首先找true，也就是事件捕获，他的优先级大于冒泡，然后所有true的元素按从外到内的顺序执行，然后才是余下false的元素，从内到外执行。
还有就是阻止冒泡，还是第三的例子，顺序应该是li、a、p、ul。
但是我在p的监听事件里添加一句event.stopPropagation();
也就是
document.querySelector("p").addEventListener("click", function(event) {
event.stopPropagation();
alert("this is p");
}, false);
那么顺序就变成了li、a、p。
ul就不执行了，因为在执行到p节点的时候阻止了冒泡，p之后的事件就不执行了。
原文：http://www.cnblogs.com/blogs-8888/p/6401291.html