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


Posted in Javascript onFebruary 03, 2017

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元素,效果如下:

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

可以看到,虽然我们只点击了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,那么结果如下:

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

我们可以看到最外层的事件先被触发,最后才是我们点击的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 相关文章推荐
JS实现self的resend
Jul 22 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
js实现自动锁屏功能
Jun 02 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 #Javascript
几种tab切换详解
Feb 03 #Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 #Javascript
拖动时防止选中
Feb 03 #Javascript
jQuery表格的维护和删除操作
Feb 03 #Javascript
折叠菜单及选择器的运用
Feb 03 #Javascript
jQuery读取XML文件的方法示例
Feb 03 #Javascript
You might like
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
python3操作mysql数据库的方法
2017/06/23 Python
Django 前后台的数据传递的方法
2017/08/08 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
浅析Python数据处理
2018/05/02 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
结婚喜宴家长答谢词
2014/01/15 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
公司捐书倡议书
2015/04/27 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
贷款工资证明范本
2015/06/12 职场文书
python如何读取.mtx文件
2021/04/22 Python