简单谈谈你对JS事件流的理解

面试官：你对JS事件流了解么

我：了解。

面试官：开始你的猴戏，不是，表演。

 

这个时候，别方，什么是事件流？大白话：

事件流所描述的就是从页面中接受事件的顺序。

再直白点，就是说要让计算机知道你触发事件的目标是谁。谁先执行，谁后执行。

 

其中事件流机制包括三个阶段

1，事件捕获阶段。

2，处于目标阶段。

3，事件冒泡阶段。

那么这三个阶段分别代表的意义是什么呢？

计算机在某种意义上就是杠精级别的存在，比方说你点了一个被div包裹的按钮，你告诉计算机我点了一个按钮，但是计算机非说你点的是div，点的是body，点的是html，仔细想想，其实也没毛病，事件流就是解决这个问题的，到底点了谁。

 

事件捕获

事件发生时，从最外层往里扒，看谁是这个事件的最终执行者。

例子：国家想整下台某个地方的领导人，就托人安排一起恐怖袭击，国家悄咪咪告诉地方政府，地方政府悄咪咪找上燃气公司，燃气公司悄咪咪找上小明，小明把燃气公司点了。在这里，事件源就是小明。事件就是点燃气公司，而在点燃气公司时，国家授意的这个过程就是事件捕获。

 

事件捕获的原理就是

计算机认为当某个事件发生时，父元素应该更早接收到事件，具体元素则最后接收到事件。比如说刚才的demo，如果是事件捕获的话，事件发生顺序会是这样的：

1. window

2. document

3. body

4. div

5. button

事件冒泡

概念：事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点。

继续刚才的例子，小明把燃气公司点了，最先受影响的是小明，干过之后，受到影响的就是燃气公司，接着就是周边群众，然后是地方政府，最后是国家。

 

如果点击了button，那么这个点击事件会按如下的顺序传播：

1. button

2. div

3. body

4. document

5. window

也就是说，click事件首先在<button>元素上发生，然后逐级向上传播。这就是事件冒泡。

目标阶段

说白了就是小明点火炸公司的阶段。有些时候目标阶段也会被归于冒泡阶段的一部分。

 

放个别人的图：

首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标。就是id为btn的标签。

　　接着在事件冒泡的过程中，时间开始是由具体的元素(a标签)接收，然后逐级向上传播到较为不具体的节点。