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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
React.js入门学习第一篇
Mar 30 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
VUE前后端学习tab写法实例
Aug 06 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
杏林同学录(五)
2006/10/09 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
node.js中的require使用详解
2014/12/15 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
微信小程序 如何获取网络状态
2019/07/26 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
Python测试人员需要掌握的知识
2018/02/08 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
Python Celery多队列配置代码实例
2019/11/22 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
如何在python中实现线性回归
2020/08/10 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
上海期货面试题
2014/01/31 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
PHP基本语法
2021/03/31 PHP
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers