事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为三个阶段，分别为：

捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；

目标阶段：真正的目标节点正在处理事件的阶段；

冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。

捕获阶段：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         .father {

             overflow: hidden;

             width: 300px;

             height: 300px;

             margin: 100px auto;

             background-color: pink;

             text-align: center;

         }

         .son {

             width: 200px;

             height: 200px;

             margin: 50px;

             background-color: purple;

             line-height: 200px;

             color: #fff;

         }

     </style>

 </head>

 <body>

     <div class="father">

         <div class="son">son盒子</div>

     </div>

     <script>

         var son = document.querySelector('.son');

         son.addEventListener('click', function() {

             console.log('son');

         }, true);

         var father = document.querySelector('.father');

         father.addEventListener('click', function() {

             console.log('father');

         }, true);

         document.addEventListener('click', function() {

             console.log('document');

         }, true);

     </script>

 </body>

 </html>

控制台输出结果为：

可以看出捕获阶段 事件是从Document节点自上而下向目标节点传播的。

冒泡阶段：
 <script>

         var son = document.querySelector('.son');

         son.addEventListener('click', function() {

             console.log('son');

         }, false);

         var father = document.querySelector('.father');

         father.addEventListener('click', function() {

             console.log('father');

         }, false);

         document.addEventListener('click', function() {

             console.log('document');

         })

     </script>

控制台输出结果为：

可以看出冒泡阶段 事件是从目标节点自上而下向Document节点传播的。

注意：

1、JS代码只能执行捕获或者冒泡其中一个阶段（要么是捕获要么是冒泡）

2、onclick和attachEvent（ie）只能得到冒泡阶段

3、addEventListener(type, listener[, useCapture]) 第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认是false），表示在事件冒泡阶段调用事件处理程序

4、实际开发中，我们很少使用事件捕获，我们更关注事件冒泡

5、有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

6、事件的冒泡有时会带来麻烦，不过是可以被阻止的，方法是：stopPropagation()

stopPropagation() 方法：终止事件在传播过程的捕获、目标处理或冒泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

DOM事件流的三个阶段的更多相关文章

  1. 理解DOM事件流的三个阶段

    本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...

  2. 漫谈DOM 事件流的三个阶段

    一丶 流 什么是流? 比如 react 中的单项数据流,Node.js 中的流,或者本文中的 DOM 事件流,都是流的具体体现.专业地讲,流是程序输入或输出的一个连续的字节序列:通俗地讲,流是有方向的 ...

  3. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

  4. js事件捕获，事件冒泡，事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  5. DOM事件： DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、自定义事件

    前端面试中只要问到事件,就肯定会有DOM事件:如果回答出来了,就会一直向下延申,其实这些东西都很简单,但我第一次被问到的时候,也是懵的: DOM事件级别: DOM0 element.onclick = ...

  6. Js-事件分发与DOM事件流

    原文地址:https://www.jianshu.com/p/dc1520327022 Js事件分发与DOM事件流 对JavaScript分发事件不熟悉,网上查阅相关资料整理后,记录一下对Javasc ...

  7. [已转移]JavaScript事件---DOM事件流

    该文章已转移到博客:https://cynthia0329.github.io/ 事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件 这个传播过程即DOM事件流. ...

  8. [DOM Event Learning] Section 4 事件分发和DOM事件流

    [DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...

  9. 从click事件理解DOM事件流

    事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这 ...

随机推荐

  1. php基础文档

    目录 PHP简介 PHP概述和名词解释 PHP常见数据类型 PHP运算符 PHP流程控制语句 PHP函数 PHP类与对象 PHP会话session与缓存cookie(扩展) 1.PHP简介 PHP,即 ...

  2. cbv请求分析

    CBV源码分析 DRF中中所有视图都是基于CBV形式完成, 所以分析其cbv源码, 了解drf的基本请求流程就比较有必要了. urls.py """下面是一个通用的url ...

  3. 第四章 开始Unity Shader学习之旅（2）

    目录 1. 强大的援手:Unity提供的内置文件和变量 1.1 内置的包含文件 1.2 内置的变量 2. Unity提供的Cg/HLSL语义 2.1 什么是语义 2.2 Unity支持的语义 2.3 ...

  4. 程序员常用markdown语法记忆小结

    0.toc被中括号包围,实现自动提取标题生成目录 [TOC]   1.*的用法 * 一星:黑点 *二星:斜体* 三星:分割线 * * * **四星:粗体**   2.#的用法 # 1级标题 ## 2j ...

  5. 01Shell入门02-echo和printf

    输出方式 小知识 echo echo -e 可以控制字体颜色和背景颜色输出 示例 echo -e "\033[41;36m Hello world \033[0m" [root@h ...

  6. volatile在外设寄存器基地址定义时的作用

    volatile,作用就是告诉编译器不要因优化而省略此指令,必须每次都直接读写其值,这样就能确保每次读或者写寄存器都真正执行到位.——野火

  7. Ubuntu 18.04.3 LTS Virtualbox提示“Kernel driver not installed (rc=-1908)”问题修复一例

    前两天Ubuntu升级了,重启后启动virtualbox保存 从错误报告上反映出来的问题原因是因为某些内核驱动程序没有经过编译,所以Virtualbox无法正常运行.事实上,在Ubuntu上处理这个问 ...

  8. GROUP_CONCAT在组合商品中的使用

    表:combined_product_item -------------------------pid sku quality-------------------------1 sku1 11 s ...

  9. HashMap踩坑实录——谁动了我的奶酪

    说到HashMap,hashCode 和 equals ,想必绝大多数人都不会陌生,然而你真的了解这它们的机制么?本文将通过一个简单的Demo还原我自己前不久在 HashMap 上导致的线上问题,看看 ...

  10. openstack网络（四）-虚机流量分析

    几种网络名词解释 使用LinuxBridge时虚机流量分析 VLAN FLAT Local VXLAN 使用OVS时虚机流量分析 几种网络名词解释 1.local网络:local网络是与其他网络和节点 ...