DOM事件流和 event的三个阶段（冒泡，捕捉，目标）详解（一）理论部分（精华）

落日映苍穹つ 2024-04-17 05:33 59阅读 0赞

### 文章目录 ###

*   *  一、eventflow 事件流大图
     *  二、基本概念
     *   *  2.1 event target 和 current event target
         *  2.2 capture、target、bubble phase
     *  三 事件三个阶段该如何理解？
     *  四 什么改变了event flow ?
     *  五，人们的误解
     *  六 ，到底什么是事件对象，事件句柄，事件监听器，事件函数
     *  七 该如何控制事件流
     *  八 给一个元素绑定多个handler函数。
     *  结语

## 一、eventflow 事件流大图 ##

本文的目的就是理解这张图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]

## 二、基本概念 ##

### 2.1 event target 和 current event target ###

分别对应了event的target属性和currentTarget属性，但从字面是无法理解这两者区别。要从事件的过程流去看待两者区别。

1.  event target: 点击谁谁就是event target
2.  current event target: 绑定给谁谁就是 current event target

### 2.2 capture、target、bubble phase ###

*  捕获阶段capture：事件对象通过目标的祖先（windows）逐层往下遍历，直到target的父元素。这个过程就是捕获阶段。
 *  目标阶段target: 事件对象在目标的时候。（at target）.如果生命bubble属性不冒泡，则事件停止传播。
 *  冒泡阶段：事件对象反向（capture的反序），从目标的父元素开始往dom的祖先window传播。

## 三 事件三个阶段该如何理解？ ##

我们看到浏览器是一个窗体盒子嵌套的模型，当你点击div时相当于同时点击了body和window，当你点击body时不一定点击了div。  
![在这里插入图片描述][2019082309342781.png]  
有三个点非常重要，不理解就会感到困惑。

*  事件的源头：就是windows,因为无论你点击任何一个位置一定点击了window。
 *  事件的终点：就是事件绑定的元素，也就是listener监听器所在的位置。
 *  事件的纠结：就是你点击的元素。

注：你点击的元素可能是事件绑定元素的父元素，也可能是其子元素，这两种情况要区分开。

step1: 你点击了页面，一定点击了window。所以时间对象最开始是在windows窗体产生的，并沿着dom树向下传播，正常的时间要经历上面三个阶段（circle）。  
step2: 在传播过程中会遇到body,div,p等元素，每个元素上都可能绑定了一个listener监听器，监听经过的click事件。但是默认情况下capture捕获阶段，事件的handler是不会触发执行（看到了敌军但是按兵不动）。  
step3: 默认事件在冒泡阶段执行，冒泡是由内向外的，所以冒泡阶段时间执行的顺序也是由内向外的。你点击了div，如果父元素也有click事件的监听器。那么先执行子元素的click事件handler，然后执行父元素的handler。  
step4: addEventListener第三个参数可以设定为ture，意思是改变触发handler的顺序。这个listener在capture阶段捕获到时间后就执行。捕获阶段是从外向内向的，所以这样的监听器就会先执行父元素的handler.

## 四 什么改变了event flow ? ##

以上全部过程，事件都是在window产生，经历了caputre,target,bubble阶段。唯一变化的地方就是，addEventlistener的第三个参数为true时，改变了事件执行的时机。

1.  如果浏览器不支持其中某一个阶段，该阶段就被跳过。
2.  如果event.bubbles设定了false。冒泡阶段就不执行
3.  如果handler函数中调用了stopPropagation() ，那么三个阶段遇到此语句的时候就停止。

## 五，人们的误解 ##

1，stopPropagation并不是停止冒泡，而是停止传播。无论event对象在哪个阶段遇到了该语句都会停止传播。不单冒泡阶段。  
2，handler被触发仅仅代表 event对象触发了函数执行，并不是event对象传播的终点。直白说，你点击的事件发生后，仅代元素的监听器监听到了事件，并触发了handler。而该事件依然继续遵守三个阶段传播。直到改变了event flow。参考4  
3，混淆了event 对象 和 handler无法区分。这个是我在内最初对事件感到困惑的根本原因。

## 六 ，到底什么是事件对象，事件句柄，事件监听器，事件函数 ##

举个例子，可能不完善，但希望帮助你理解这其中区别。一个军队有司令，军长，师长。。。。

1.  司令只有一个就像window，会向下级发送指令。不同颜色的指令代表了不同的任务类别（event type）
2.  每个下级部门都有一个规章制度，说明如果遇到红色执行就前进，遇到黑色执行就退兵。同时有一个传令兵，负责接收指令并通知队伍执行。
3.  因为要保证司令的指令传达给全军，所以 规定指令必须传递到底层士兵，并且回传给司令部。
4.  等所有人都接收到指令后，从士兵网上一次执行司令部的命令。  
    注：命令下达阶段就是capure，大家只准看不许做。命令执行阶段就是冒泡阶段，从下往上做。

情景一：  
对于红色指令，师部告诉传令兵，如果看到就执行，然后再传给下级。那么传令兵就会在第一次看命指令的时候就告诉，执行handler的计划。注：执行的同时，会把指令继续给下级，因为司令的手令一定要传达给全军。

情景二：  
S级指令，该指令非常特殊。他不需要回传给司令部，当命令传达给最底层部门后，该部门只执行领命，不回传给司令部。这样就防止了该部门的上级重复执行命令。

情景三：  
超级权限： 某个部门对于蓝色指令有特殊权限stopPropagation，该权限可以在命令执行后，不继续传播。如果在传令阶段，stopPropagation可以不往下传播。在执行阶段stopPropagation可以不往上执行。该权限非常有用。

## 七 该如何控制事件流 ##

![20190823111112742.png][]  
每个元素都绑定了click

1.  如果我们点击div，但不想触发body的click。我们可以设置事件的bubble为false，或者执行后调用stopPropagation()。
2.  如果我们点击了div，此时div设置了不冒泡，事件在div执行后就不继续了。如果想同时触发body的click。  
    可以设置body的click的capture为true。这样事件在往下传播时就直接执行，此时事件还没传播给div。所以不受div stopPropagation的限制。注：事件还是会传递给div
3.  继续2，点击div，如果只想执行body的事件函数，不想执行div的函数。需要设置body的click的capture为true的同时调用stopPropagation。这样body执行完后div不传播事件，div就不会执行。  
    注：这里我点击的是div，但是触发的是body。如果点击的是body，div正常也不会执行。

## 八 给一个元素绑定多个handler函数。 ##

通过addEventListener可以给给以元素绑定多个handler。比如一个click事件可以触发多个函数。此时函数执行的顺序就是绑定的顺序。这里并不涉及事件的三个阶段，也不存在冒泡过程。仅仅handler触发后，js函数执行顺序的问题。

## 结语 ##

以上是我这几天对于事件的思考，如果可以全部理解上面的内容，或者发现内容中纰漏的地方才可以灵活的利用事件流控制事件的发生，或者解决工作中绑定了事件但是没有执行函数的情况。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/c7ac14c06f8e4d039e22877bebac0555.png
[2019082309342781.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/d951c671c52b4331ba3b6616b6dd3d81.png
[20190823111112742.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/dc343e92347e468eb4d5a22b4b4bc32a.png