JavaScript中捕获与冒泡详解及实例

更新时间：2017年02月03日 14:25:26 投稿：lqh

这篇文章主要介绍了JavaScript中捕获与阻止捕获、冒泡与阻止冒泡详解及实例的相关资料,需要的朋友可以参考下

JavaScript中捕获/阻止捕获、冒泡/阻止冒泡

　　事件流描述的是从页面中接收事件的顺序。提出事件流概念的正是IE和Netscape，但是前者提出的是我们常用的事件冒泡流，而后者提出的是事件捕获流。

第一部分：事件冒泡

　　即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。

　　下面举一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>bubble</title>
 <style>
  button{
   background: red;
   color:white;
  }
  #third{
   width: 50px;
   height: 50px;
   border:thin solid red;
  }
  #second{
   width: 100px;
   height: 100px;
   border:thin solid red;
  }
  #first{
   width:200px;
   height: 200px;
   border:thin solid red;
  }
 </style>
</head>
<body>
 <div id="first">
  <div id="second" >
   <div id="third" >
    <button id="button">事件冒泡</button>
   </div>
  </div>
 </div>
 <script>

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

  document.getElementById("third").addEventListener("click",function(){
   alert("third");
  },false);

  document.getElementById("second").addEventListener("click",function(){
   alert("second");
  },false);  

  document.getElementById("first").addEventListener("click",function(){
   alert("first");
  },false);

 </script>
</body>
</html>

这时，我们只点击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。

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

第二部分：事件捕获

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>bubble</title>
 <style>
  button{
   background: red;
   color:white;
  }
  #third{
   width: 50px;
   height: 50px;
   border:thin solid red;
  }
  #second{
   width: 100px;
   height: 100px;
   border:thin solid red;
  }
  #first{
   width:200px;
   height: 200px;
   border:thin solid red;
  }
 </style>
</head>
<body>
 <div id="first">
  <div id="second" >
   <div id="third" >
    <button id="button">事件冒泡</button>
   </div>
  </div>
 </div>
 <script>

  document.getElementById("button").addEventListener("click",function(){
   alert("button");
  },true);

  document.getElementById("third").addEventListener("click",function(){
   alert("third");
  },true);

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

  document.getElementById("first").addEventListener("click",function(){
   alert("first");
  },true);

 </script>
</body>
</html>

大家可以看到这个例子我只是把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事件流中，实际的目标在捕获阶段不会接收到事件，下一个阶段是处于目标阶段，这时事件被触发，最后进入事件冒泡阶段。我们认为处于目标阶段是事件冒泡阶段的一部分。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

快速解决bootstrap下拉菜单无法隐藏的问题
今天小编就为大家分享一篇快速解决bootstrap下拉菜单无法隐藏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
IE bug table元素的innerHTML
做项目时遇到一个数据表需要展示，由于坚定着使用合理标签表示合适内容，于是使用了table，悲剧开始了。
2010-01-01
12个非常实用的JavaScript小技巧【推荐】
下面小编就为大家带来一篇12个非常实用的JavaScript小技巧【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
js 可选链操作符的使用
可选链操作符(?.)允许读取位于链接对象链身处的属性的值，本文就详细的介绍一下，感兴趣的小伙伴们可以参考一下
2021-06-06
javascript创建含数字字母的随机字符串方法总结
如果想创建一个含有数字、字母（大小写）或者符号的字符串，比如从[a-zA-Z0-9]集合中中创建一个随机的字符串，长度为5.有没有什么比较好的代码呢？本文提供了几种方法，包括自动改变字符集合。一起来学习下。
2016-08-08
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
这篇文章主要介绍了创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件的相关资料,需要的朋友可以参考下
2016-06-06
利用JS轻松实现获取表单数据
本文主要介绍了利用JS轻松实现获取表单数据。方法有别于原始的做法，大家可以试着找原始做法与本文所说方法之间的区别。有兴趣的朋友可以看下，希望对大家有所帮助
2016-12-12
原生JavaScript实现Tooltip浮动提示框特效
这篇文章主要为大家详细介绍了原生JavaScript设计和实现Tooltip浮动提示框特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
javascript实现登录框拖拽
这篇文章主要为大家详细介绍了javascript实现登录框拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
js 计算图片内点个数的示例代码
这篇文章主要介绍了js 计算图片内点个数的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04