事件流动(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 on 2018-11-15 21:42  知学  阅读(224)  评论(0编辑  收藏  举报