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的动态表格插件
Mar 28 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
python全栈开发语法总结
2020/11/22 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
50道外企软件测试面试题
2014/08/18 面试题
优秀毕业生求职推荐信范文
2013/11/21 职场文书
自我评价优秀范文分享
2013/11/30 职场文书
养殖项目策划书范文
2014/01/13 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
求职信范文大全
2014/05/26 职场文书
机械操作工岗位职责
2014/08/08 职场文书
岳麓书院导游词
2015/02/03 职场文书
学生个人总结范文
2015/02/15 职场文书
2016春节慰问信范文
2015/03/25 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
django中websocket的具体使用
2022/01/22 Python