Event flow（事件流）

Event flow(事件流)

流：

流的概念，在现今的JavaScript中随处可见。比如说React中的单向数据流，Node中的流，又或是今天本文所讲的DOM事件流。都是流的一种生动体现。至于流的具体概念，我们采用下文的解释：

用术语说流是对输入输出设备的抽象。以程序的角度说，流是具有方向的数据

事件流之事件冒泡与事件捕获：

在浏览器发展的过程中，开发团队遇到了一个问题。那就是页面中的哪一部分拥有特定的事件？

可以想象画在一张纸上的一组同心圆，如果你把手指放在圆心上，那么你的手指指向的其实不是一个圆，而是纸上所有的圆。放到实际页面中就是，你点击一个按钮，事实上你还同时点击了按钮所有的父元素。

开发团队的问题就在于，当点击按钮时，是按钮最外层的父元素先收到事件并执行，还是具体元素先收到事件并执行？所以这儿引入了事件流的概念。

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

因为有两种观点，所以事件流也有两种，分别是事件冒泡和事件捕获。现行的主流是事件冒泡。

1. 1.      Capture

定义：

The event object propagate through the target's ancestors from the defaultView to the target's parent.
事件对象在事件目标的祖先中上到下顺向传播，从最顶层的defaultView到事件目标的（直系）父元素。

捕获阶段发生在整个流动的开始。在这阶段里事件会从父（主干）到子（分支）由上往下传播，被元素一层层的捕获。

一般没太大需要监听捕获阶段的事件；如果确实希望这么做，需要将addEventlistener的第三个参数设置为ture

// 第三个参数设置是否为捕获阶段，默认为false

element.addEventListener('click', function() {}, true)

1. 2.      target

定义：

The event object arrive at the event object's event target.

事件对象到达事件目标。

addEventListener可以监听目标阶段的事件：

element.addEventListener('click', function() {})

如果事件是不可冒泡的，那整个事件流动会到此为止，不会发生下面的冒泡阶段

1. 3.      bubble

定义：

The event object propagates through the target's ancestors in reverse order, starting with the target's parent and ending with the defaultView.
事件对象会在事件目标的祖先元素里反向传播，由开始的父元素到最后的defaultView（document）

冒泡阶段发生在最后，在这个阶段事件会从子（分支）到父（主干）逆向传播，看起来像是一个水里的泡泡往上冒

 

总结：若一个元素（div）是目标元素（button）的祖先，那事件对象会在该元素上触发两次：一次在捕获阶段，另一次实在冒泡阶段，当事件对象在事件目标元素（button）上触发是，事件流动进入了目标阶段