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 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
保险经纪人求职信
2014/03/11 职场文书
森林防火标语
2014/06/23 职场文书
学习雷锋主题班会
2015/08/14 职场文书
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技