JavaScript(3)---事件冒泡与事件捕获

一、理解冒泡与捕获

假设有这么一段代码

<body>

  <div><p>标签</p>

  </div>

</body>

转换成图如下

我们知道Dom是有节点关系的

body -> div -> p 之间的关系就是  爷爷 -> 父亲 -> 儿子。

我们来思考一个关键的问题

如果此时我们在 body div p 都绑定一个点击事件(click)。此时如果我们只点击 p标签，它会不会触发div绑定事件 和 body绑定事件？

答案是会的

那这个时候就会有一个问题，既然点击 p标签 会触发 div绑定事件 和 body绑定事件，那执行顺序是怎么样的呢？

body事件 -> div事件 -> p事件？ 还是  p事件  -> div事件 -> body事件？

这两种不同的执行顺序就是对应上面的 事件冒泡 和 事件捕获。

事件捕获 事件从最上一级标签开始往下查找，直到捕获到事件目标(body事件 -> div事件 -> p事件)。

事件冒泡 事件从事件目标开始，往上冒泡直到页面的最上一级标签( p事件 -> div事件 -> body事件)

为了不混淆记忆它们，这里有个通俗的理解冒泡：

冒泡嘛，就像水里往上冒的泡泡，从一开始很小，然后慢慢变大直到破裂。所以是从小到大,也就是子标签到父标签传递的过程。那么事件捕获记住与冒泡相反就可以了。

二、事件冒泡 与 阻止冒泡

1、事件冒泡示例

代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>事件冒泡</title>

  <style>

    #dv1{   /*为了直观 这里添加些样式*/

      width: 300px;

      height: 200px;

      background-color: red;

    }

    #dv2{

      width: 250px;

      height: 150px;

      background-color: green;

    }

    #dv3{

      width: 200px;

      height: 100px;

      background-color: blue;

    }

  </style>

</head>

<body>

<div id="dv1">爷爷

  <div id="dv2">父亲

    <div id="dv3">儿子</div>

  </div>

</div>

<script>

  //事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.

  document.getElementById("dv1").onclick=function () {

    console.log(this.id+" 爷爷");

  };

  document.getElementById("dv2").onclick=function () {

    console.log(this.id+" 父亲");

  };

  //事件处理参数对象

  document.getElementById("dv3").onclick=function (e) {

    console.log(this.id+" 儿子");

    //阻止事件冒泡

    //e.stopPropagation();

  };

</script>

</body>

</html>

运行结果

从这个示例我们可以看出3点

1、当点击儿子元素后,父亲和爷爷的点击事件也触发了。

2、onclick事件的顺序 儿子 - 父亲 - 爷爷。

3、当点击爷爷元素后，父亲和儿子的点击是不会触发的。

2、阻止事件冒泡

既然有冒泡事件,那肯定在实际开放过程中,你不需要冒泡，你只想儿子点击触发事件,父亲和爷爷不触发事件。

语法

1、window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

2、e.stopPropagation(); 谷歌和火狐支持

因为我用的是谷歌浏览器,所以这里用第二种方式阻止冒泡(只需把上面阻止事件冒泡的代码取消注释就可以了)

运行结果

从运行结果很明显看出,已经阻止了事件冒泡。

三、事件捕获

示例

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    #dv1 {

      width: 300px;

      height: 200px;

      background-color: red;

    }

    #dv2 {

      width: 250px;

      height: 150px;

      background-color: green;

    }

    #dv3 {

      width: 200px;

      height: 100px;

      background-color: blue;

    }

  </style>

</head>

<body>

<div id="dv1">爷爷

  <div id="dv2">父亲

    <div id="dv3">儿子</div>

  </div>

</div>

<script>

    //为每个元素绑定事件  这里

    /**

     * 捕获时间 从外到里

     * 1、 addEventListener不是每个浏览器都兼容的

     * 2、 这里true为事件捕获 false为事件冒泡

     */

     document.getElementById("dv1").addEventListener("click", function (e) {

         console.log(this.id+" 爷爷");

    }, true);

   document.getElementById("dv2").addEventListener("click", function (e) {

         console.log(this.id+" 父亲");

    }, true);

      document.getElementById("dv3").addEventListener("click", function (e) {

         console.log(this.id+" 儿子");

    }, true);

</script>

</body>

</html>

运行

很明显，这里是从外到里执行事件。

你如果愿意有所作为，就必须有始有终。(22)

JavaScript(3)---事件冒泡、事件捕获的更多相关文章

  1. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

  2. JS 事件冒泡、捕获。学习记录

    作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...

  3. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  4. 事件冒泡与捕获&amp;事件托付

    设想这样一种情况 一个div里面有个span元素  ,当鼠标单击span时,这个事件算是谁的? div还是span? 准确的说两个都触发了,这种认可大家都允许,事实就是这种, 第二个问题来了,这个事件 ...

  5. JavaScript事件——冒泡、捕获

    本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...

  6. JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

    有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...

  7. Javascript中的事件冒泡与捕获

    事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数,useCapture:是否使用事件捕获,觉得有点模糊 Js事件流 页面的哪一部 ...

  8. JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)

    1.事件冒泡与事件捕获 2.事件与事件句柄   3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处:     1.每个函 ...

  9. JavaScript事件冒泡与捕获

    event.preventDefault();    如果event.cancelable的值为true,可以取消默认事件 event.cancelable;             元素是否可以取消 ...

  10. JavaScript事件冒泡和捕获

    事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件. 事件冒泡是自下而上的去触发事件. 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获.true,事件捕获:fa ...

随机推荐

  1. VScode使用入门

    使用命令行打开 vscode 如何获取code命令 一般来说,当windows安装了vscode之后,重启之后就可以使用 code 这个命令 也可以直接将vscode直接加入到环境变量中进行使用 命令 ...

  2. 【原】Django常用命令总结

    1.终端命令 # 查看django版本 $ python -m django --version # 创建项目,名为mysite $ django-admin startproject mysite ...

  3. Java 石家庄铁道大学软件工程系 学生学籍管理系统 2019 版

    本系统的作用是简单实现一些学生成绩管理操作:录入,修改,绩点计算,以及系统退出等. 首先建一个主函数实现界面的实现,然后建一个数据类用来定义存放数据.之后建立一个工具类,用来实现所有要进行的操作.首先 ...

  4. JavaScript相关

    用文本编辑软件和浏览器就能开发和调试JavaScript代码 Node.js  在浏览器之外(服务器端)独立运行Ja¬vaScript代码的Node.js于2009年问世,一个独立的JavaScrip ...

  5. linux文件的查找和检索

    1)按文件属性查找 1)文件名: find  +  查找的目录  +   -name  +  "文件名" 文件名中可以使用通配符:*号表示多个,?号表示一个 2)文件大小: fin ...

  6. 转载--php函数使用--var_export

    var_export用于将数组转换成字符串 <?php $arr = [ 'key1'=>'val1', 'key2'=>'val2', 'key3'=>'val3', 'ke ...

  7. 02使用GitHub远程仓库

    一.远程库配置 由于本地的GIT仓库和GitHub仓库之间的传输是通过SSH加密的,所以需要以下配置: 1.创建SSH key 为什么GitHub需要SSHKey:根据key来授权,有哪些key可以往 ...

  8. C# Stream篇（三） -- TextWriter 和 StreamWriter---转载

    C# Stream篇(三) -- TextWriter 和 StreamWriter TextWriter 和 StreamWriter 目录: 为何介绍TextWriter? TextWriter的 ...

  9. PAT A 1020 Tree Traversals

    给出一棵二叉树的后序遍历序列和中序遍历序列,求这棵二叉树的层序遍历序列 #include<iostream> #include<cstring> #include<que ...

  10. windows网络编程-C语言实现简单的UDP协议聊天

    与TCP协议下编写服务端程序代码类似,但因为是无连接的形式,所以不需要监听. 这次,我用了一点不同的想法:我建立一个服务端,用了两个端口和两个套接字,把服务端作为一个数据转发的中转站,使得客户机之间进 ...