浅谈Event Flow、Process、Method及其Applications
事件流动（Event Flow）：
DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。所以说，DOM事件不单单只会在一个Element上触发，它还会流向其他Element。事件的流动通常会经历这么三个阶段；
冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。
捕获型事件流：事件的传播的英文从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
过程（Process）：
事件通过DOM树传播。应用程序可以使用该dispatchEvent()方法调度事件对象，并且事件对象将通过DOM事件流确定的DOM树传播。
事件对象被分派到事件目标。但是在发送开始之前，必须首先确定事件对象的传播路径。传播路径是的有序列表的当前事件的目标，通过该事件传递。该传播路径反映了文档的分层树结构。列表中的最后一项是事件目标，列表中的前面项目称为目标的祖先，前面的项目作为目标的父项。一旦确定了传播路径，事件对象就会经过一个或多个事件阶段。有三个事件阶段：捕获阶段，目标阶段和泡沫阶段。事件对象完成这些阶段，如下所述。如果不支持某个阶段，或者事件对象的传播已停止，则将跳过该阶段。例如，如果bubbles属性设置为false，则将跳过气泡阶段，如果stopPropagation()在分派之前调用，则将跳过所有阶段。
1.捕获阶段（capture phase）
定义：事件对象在事件目标的祖先中上到下顺向传播，从最顶层的defaultView到事件目标的（直系）父元素。
捕获阶段发生在整个事件流动的开始。在这阶段里事件会从父（主干）到子（分支）由上往下传播，被元素一层层地捕获。
2.目标阶段（target phase）
定义：事件对象到达事件目标。
3。冒泡阶段（bubble phase）
定义：事件对象会在事件目标的祖先元素里反向传播，由开始的父元素到最后的defaultView（document）。
冒泡阶段发生在最后，这也是我们最为熟悉的一个阶段。在这阶段里事件会从子（分支）到父（主干）逆向传播，看起来像是一个水里的泡泡往上冒。
方法（Method）：
语法：
element.addEventListener(event, function, useCapture)
event 必需。描述事件名称的字符串。注意： 不要使用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。
function 必需。描述了事件触发后执行的函数。 当事件触发时，事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否 在捕获或冒泡阶段执行。可能值：true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行
应用（Applications）：(转载自：https://blog.csdn.net/qq_30100043/article/details/77186811 )
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 #wrap {
10 width: 200px;
11 height: 200px;
12 background: orange;
13 }
14 #outer {
15 position: relative;
16 top: 50px;
17 left: 50px;
18 width: 100px;
19 height: 100px;
20 background: #eeddff;
21 }
22 #inner {
23 position: relative;
24 top: 25px;
25 left:25px;
26 width: 50px;
27 height: 50px;
28 background: #44ddff;
29 }
30 </style>
31 </head>
32 <body>
33 <div id="wrap">
34 <div id="outer">
35 <div id="inner"></div>
36 </div>
37 </div>
38 </body>
39 <script>
40 var wrap = document.getElementById('wrap');
41 var outer = document.getElementById('outer');
42 var inner = document.getElementById('inner');
43
44 wrap.addEventListener('click',function(){
45 alert('789');
46 },false);
47 outer.addEventListener('click',function(){
48 alert('456');
49 },false);
50 inner.addEventListener('click',function(){
51 alert('123');
52 },false);
53 inner.addEventListener('click',function(){
54 alert('inner');
55 },true);
56 wrap.addEventListener('click',function(){
57 alert('wrap');
58 },true);
59 outer.addEventListener('click',function(){
60 alert('outer');
61 },true);
62 </script>
63 </html>
以上代码摘自https://segmentfault.com/a/1190000003497939）
点击查看此案例，我们会发现，首先是触发的是捕获阶段的事件，然后再触发的是冒泡阶段的事件。
我们会发现inner的dom对象上绑定的两个事件，是先弹出的123，然后又弹出的inner。这个是为什么呢？
这是因为如果当前的dom对象已经处于当前点击位置的最底部了（重点是这里最底部，如果没有到最底部，还是和外部的两个一样的）。就是说如果这个dom对象是捕获的终点也是冒泡的起点，它就不区分冒泡捕获了，只是纯粹的绑定了两个dom事件，所以，这两个事件就是看谁先绑定的靠前，谁就先实行。。。
（注：以上内容均来源于网上，基本转自：http://www.cnblogs.com/liuwei-0313/p/9935779.html）
