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


Posted in Javascript onDecember 07, 2016

事件流描述的是从页面中接收事件的顺序。提出事件流概念的正是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实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
js时间查询插件使用详解
Apr 07 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 #Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 #Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 #Javascript
jquery插入兄弟节点的操作方法
Dec 07 #Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 #Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 #Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 #Javascript
You might like
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
python实现报表自动化详解
2017/11/16 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
会计演讲稿范文
2014/05/23 职场文书
银行求职信
2014/05/31 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript