关于js冒泡、捕获、以及阻止冒泡

有如下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之后的事件就不执行了。

转载于:https://www.cnblogs.com/blogs-8888/p/6401291.html