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 相关文章推荐
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
纯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获取网页内容方法总结
2008/12/04 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
javascript的函数
2007/01/31 Javascript
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python截取两个单词之间的内容方法
2018/12/25 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Django返回HTML文件的实现方法
2020/09/17 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
悬挂训练绳:TRX
2017/12/14 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
心理健康课教学反思
2014/02/13 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
大学生村官演讲稿
2014/04/25 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
2015年纪委工作总结
2015/05/13 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python