JavaScript中捕获与冒泡的示例分析

 
 
 


 
  
   
    事件冒泡
   

这时，我们只点击button元素，效果如下：

可以看到，虽然我们只点击了button元素，但是，button外的third、second、first上的事件由内向外以此被触发，触发的顺序是由DOM树的下层到DOM树的最上面，故称为冒泡。

（说明：尽管这里我使用了DOM2级事件处理程序，并设置每个事件为冒泡阶段发生，但是即使使用DOM0级，得到的结果也是这样的，冒泡是默认的）

但是如果我们不希望事件冒泡呢？那么如何阻止事件冒泡？

实际上，事件的对象有一个stopPropagation()方法可以阻止事件冒泡，我们只需要把上个例子中button的事件处理程序修改如下：

document.getElementById("button").addEventListener("click",function(event){
   alert("button");
   event.stopPropagation(); 
  },false);

这样，点击button后，只会弹出一个弹窗，显示button。

注意：现代所有的浏览器都支持事件冒泡，只是在实现上有一些差别。

第二部分：事件捕获

事件捕获和事件冒泡是刚好相反的，事件捕获是指不太具体的节点应该更早的接收到事件，而最具体的节点应该最后接收到事件。举例如下所示：

 
 
 


 
  
   
    事件冒泡
   
  
 
 

大家可以看到这个例子我只是把addEventListener()方法的第三个参数由前面例子的false修改为了true,也就是使用捕获方式获得button，那么结果如下：

我们可以看到最外层的事件先被触发，最后才是我们点击的button事件被触发，这便是事件捕获。

 那么我们如何才能阻止事件的捕获呢？使用event.stopPropagation()方法吗？答案是否定的，这里要知道，stopPropagation()方法只能阻止事件的冒泡，而不能阻止事件捕获。

但是我们可以使用DOM3级新增事件stopImmediatePropagation()方法来阻止事件捕获，另外此方法还可以阻止事件冒泡。应用如下：

document.getElementById("second").addEventListener("click",function(){
 alert("second");
 event.stopImmediatePropagation();
},true);

这样，就可以在id为second处阻止事件的捕获了。

注意：尽管这是Netscape Navigator提出的事件流，但是现在所有的浏览器都支持这种事件流模型。但是由于老的浏览器不支持，所以很少有人使用事件捕获。

  第三部分：DOM事件流

DOM2级事件规定的时间流包括 三个阶段：

• 事件捕获阶段

• 处于目标阶段

• 事件冒泡阶段

注意：在DOM事件流中，实际的目标在捕获阶段不会接收到事件，下一个阶段是处于目标阶段，这时事件被触发，最后进入事件冒泡阶段。我们认为处于目标阶段是事件冒泡阶段的一部分。

以上是“JavaScript中捕获与冒泡的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！