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 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
JavaScript实现星级评价效果
May 17 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
用Zend Encode编写开发PHP程序
2010/02/21 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
Smarty模板配置实例简析
2019/07/20 PHP
Smarty模板语法详解
2019/07/20 PHP
对xmlHttp对象的理解
2011/01/17 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
Python中集合类型(set)学习小结
2015/01/28 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
Python新手学习函数默认参数设置
2020/06/03 Python
如何解决python多种版本冲突问题
2020/10/13 Python
护士辞职信模板
2014/01/20 职场文书
销售经理岗位职责
2015/01/31 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
功夫熊猫观后感
2015/06/10 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
MySQL多表查询机制
2022/03/17 MySQL
python区块链持久化和命令行接口实现简版
2022/05/25 Python