这是我参与「第四届青训营」笔记创作活动的第2天

前言

为了探究一下事件的冒泡和捕获的关系，写了一个实际的代码来检验一下。结果没想到困住我的不是捕获和冒泡的不好理解，而是addEventListener和removeEventListener，这部分内容在后面再单独写一篇来讲解一下吧。

这次的代码花了比较长的时间构思如何能让大家能很直观见到效果，于是尽量都动态配置属性，也正是这又发现了自己很多基础知识的不牢固。希望能够帮助大家更好的理解。

代码演示

浏览器中通常默认事件为冒泡流程，但捕获流程优先于冒泡流程执行

冒泡就像字面的意思，从水的深处冒出的气泡，逐渐上浮到最高层。在 HTML 中，用来比喻一层一层嵌套的标签。冒泡即是从触发事件的元素一层一层向父级传播，触发这条路径中的所有相同类型事件（如点击事件）。

当点击 three 时，从 textarea 中可以看出，按冒泡顺序依次触发了three、two、one的点击事件。

执行流程为下图：

可以直观看到 click 事件从我们点击的 three 开始逐级向父级传播，直到 HTML 页面的最终元素 document。由我们点击的具体内容，逐渐到不具体的内容，这个过程就是 冒泡。

捕获也是非常形象的，与冒泡相反，是从外向内，直到最后抓住某个确切的东西。在 HTML 中，即是事件从最外层逐级深入，直到触发事件的元素，途中触发所有元素中相同类型的事件。

当我们把所有事件切换为捕获流程时，同样点击 three 盒子，可以看到依次触发的是 one、two、three 的点击事件，

执行流程如下图：

可以直观看到 click 事件从 HTML 页面最高级的 document 向我们点击的 three 开始逐级向子级传播。由最不具体的内容，逐渐到我们点击的最具体内容，这个过程就是 捕获。

当为嵌套的元素添加的点击事件中既有冒泡又有捕获时，会以什么样的顺序来执行呢？接下来我们看一看。

首先回顾一下知识点

浏览器中通常默认事件为冒泡流程，但捕获流程优先于冒泡流程执行

那么对于以下情况，会输出什么？大家可以先自己想一想试试看。

执行流程见下图：

故最终输出的答案为：

one click

three click

two click

先进行红色箭头的流程，即在浏览器中优先执行的捕获流程，后进行绿色箭头的正常冒泡流程。

在捕获时，若事件不是在声明时确定是捕获流程的事件的话，在该阶段不会被执行。

浏览器仅执行当前阶段的事件，先执行完捕获流程再执行冒泡流程

事件参数（例如经典的e参数）中有一个方法为 stopPropagation，在声明事件函数时执行此方法会阻止冒泡和捕获流程，不再执行后续流程中的同类事件。

此方法是阻止事件的后续继续进行，对于本次事件发生不阻拦

在默认全冒泡事件流程中，我们在 two 阻止事件的继续冒泡。可以看到冒泡流程从 three 到 two 执行完毕后，由于 stopPropagation 方法的阻止，不再继续冒泡执行 one 的点击事件。

若有什么错误之处，还请大家多多指正。如果感觉有所帮助，还请麻烦点个赞鼓励一下我。