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 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
sharp.js安装过程中遇到的问题总结
Apr 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
十天学会php(2)
2006/10/09 PHP
PHP积分兑换接口实例
2015/02/09 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
webpack3之loader全解析
2017/10/26 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
python用插值法绘制平滑曲线
2021/02/19 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
高职教师岗位职责
2013/12/24 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
租房协议书样本
2014/08/20 职场文书
农行心得体会
2014/09/02 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
写给导师的自荐信
2015/03/06 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
python b站视频下载的五种版本
2021/05/27 Python
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS