前端开发：JS的事件冒泡和事件捕获详解

前言

在前端开发过程中，关于JS原生的核心内容使用是日常工作中的常态，关于底层和原理的掌握使用，尤其是在性能优化方面甚为重要。作为前端开发的进阶内容，在实际开发过程中事件发生的顺序称为事件流，当触发某个事件的时候会引起一系列的连锁反应，但是当业务场景中页面功能嵌套了某几个元素来处理同一个事件，那么哪个事件会先被触发？这就需要了解事件传播当顺序。也就是当有多个盒子嵌套且多层盒子都存在事件的情况下，需要了解这些事件的发生顺序，JS的事件冒泡和事件捕获就是用来处理事件流中的事件发生顺序的，所以在JS中事件冒泡和事件捕获的使用也是比较常用的知识点，而且在前端求职面试的时候二者也是必考知识点，可以说非常重要，那么本文就来做一下总结，方便查阅使用。

事件流

在介绍事件冒泡和事件捕获之前，首先来了解一下事件流的概念。事件流指的是事件完整执行过程中的流动路径 ，也就是说事件流是网页中元素接受事件的顺序，事件流即事件发生的顺序。事件流分为事件冒泡阶段和事件捕获阶段 ，其中，事件冒泡阶段是从子到父；事件捕获阶段是从父到子。

其实，DOM(文档对象模型)结构是一个树型的结构，当一个HTML元素产生一个事件的时候，该事件会在元素节点与根节点之间的路径上传播，路径所经过的节点都会收到该事件，而这个传播过程的顺序就是DOM事件流。

注意：众所周知，目前前端领域使用的DOM标准事件流传播顺序是按照W3C统一之后的标准，即：先捕获后冒泡，也就是说当触发DOM事件的时候，会先进行事件捕获，捕获到事件源头之后再通过事件传播进行事件冒泡。

addE