前言
在前端开发过程中,关于JS原生的核心内容使用是日常工作中的常态,关于底层和原理的掌握使用,尤其是在性能优化方面甚为重要。作为前端开发的进阶内容,在实际开发过程中事件发生的顺序称为事件流,当触发某个事件的时候会引起一系列的连锁反应,但是当业务场景中页面功能嵌套了某几个元素来处理同一个事件,那么哪个事件会先被触发?这就需要了解事件传播当顺序。也就是当有多个盒子嵌套且多层盒子都存在事件的情况下,需要了解这些事件的发生顺序,JS的事件冒泡和事件捕获就是用来处理事件流中的事件发生顺序的,所以在JS中事件冒泡和事件捕获的使用也是比较常用的知识点,而且在前端求职面试的时候二者也是必考知识点,可以说非常重要,那么本文就来做一下总结,方便查阅使用。
事件流
在介绍事件冒泡和事件捕获之前,首先来了解一下事件流的概念。事件流指的是事件完整执行过程中的流动路径 ,也就是说事件流是网页中元素接受事件的顺序,事件流即事件发生的顺序。事件流分为事件冒泡阶段和事件捕获阶段 ,其中,事件冒泡阶段是从子到父;事件捕获阶段是从父到子。
其实,DOM(文档对象模型)结构是一个树型的结构,当一个HTML元素产生一个事件的时候,该事件会在元素节点与根节点之间的路径上传播,路径所经过的节点都会收到该事件,而这个传播过程的