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代码
May 19 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
详解使用create-react-app快速构建React开发环境
May 16 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 Javascript
vue+iview使用树形控件的具体使用
Nov 02 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
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
JS常用知识点整理
2017/01/21 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
银行会计财务工作个人的自我评价
2013/10/29 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
经典公益广告词
2014/03/13 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
工程质检员岗位职责
2015/04/08 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
Java线程的6种状态与生命周期
2022/05/11 Java/Android