浅谈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）

posted @ 2019-01-24 23:03 理想的现实主义者阅读(178) 评论(0) 收藏举报

刷新页面返回顶部

理想的现实主义者