【Web前端基础知识】DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

DOM 事件流会有 3 个阶段：

事件捕获阶段、确定目标阶段、事件冒泡阶段。

事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。

事件捕获阶段：

事件的传播是从最不特定的事件目标到最特定的事件目标。即从 DOM 树的根到叶子，也就是从document节点开始一层一层向下传播，直到寻找到触发事件的元素。

确定目标阶段：

通过捕获确定具体触发事件的元素，之后进行处理事件。

事件冒泡阶段：

事件的传播是从最特定的事件目标到最不特定的事件目标。即从 DOM 树的叶子到根，也就是我们从触发事件的元素一层一层向外传递事件，直到document节点。

比如在div元素在触发click事件时，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到div元素，事件进入目标阶段处理事件，在目标阶段结束之后，事件由div元素开始事件的冒泡阶段，一层一层向外直到Document节点为止。总的来说捕获阶段是从里到外，冒泡阶段是从里向外。

在如下代码中，点击时弹出各自的id名称。

1. <div id="box1" style="background-color: red;"> 
2.     <div id="box2" style="background-color: yellow;"> 
3.         <div id="box3" style="background-color: yellowgreen;"></div> 
4.     </div> 
5. </div> 

Js代码为：

1. var oDiv = document.getElementsByTagName('div') 
2. function fun(){ 
3.     alert(this.id); 
4. } 
5. oDiv[0].addEventListener('click',fun) 
6. oDiv[1].addEventListener('click',fun) 
7. oDiv[2].addEventListener('click',fun) 

当我们点击box3时，弹出顺序为box3 、box2、box1。

我们来分析一下过程，在点击事件发生时，开始进行事件捕获，从根节点document开始根据结构一层一层往里查找，到html元素，到body元素，再到box1元素，再到box2元素，再到box3元素，此时找到了触发事件的元素，捕获阶段结束。之后进入确认目标阶段，开始处理事件，弹出box3。处理事件完成后将事件根据结构依次传递给父元素，当传递到box2元素时，发现box2有同类型的事件，所以触发box2的点击事件弹出box2，再向外传递给box1元素，同理box1有同类型的事件，弹出box1.

阻止冒泡：

如果你感觉冒泡机制影响了你的代码，就可以进行阻止冒泡。

标准浏览器：ev.stopPropagation();(ev为事件对象)

Ie浏览器：ev.cancelBubble = true;(ev为事件对象)

例如在上述代码中只想让box3触发点击事件，我们就可以给box3添加事件时写上

1. oDiv[2].onclick = function (ev){ 
2.    var ev = window.event || ev;  
3.    ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;