事件流动(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)