事件流（事件冒泡与事件捕获）

概念

DOM结构是一个树形结构，当一个HTML元素发生一个事件时，该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播过程就是DOM事件流。

分类

分为事件冒泡模型和事件捕获模型和DOM标准事件模型

事件冒泡

是由IE开发团队提出来的，从DOM树形结构上理解就是事件由叶子节点沿祖先节点一直向上传递直至根节点。事件像水中的气泡一样一直往上冒，直到顶端。

 1     <div id="parent">
 2         <div id="child">子元素</div>
 3     </div>
 4     <script>
 5         var parent = document.getElementById('parent');
 6         var child = document.getElementById('child');
 7         parent.addEventListener('click', function () {
 8             alert('parent');
 9         }, false)
10         child.addEventListener('click', function () { 11 alert('child'); 12 }, false) 13 //先弹出'child'，后弹出'parent' 14 </script>

事件捕获

与冒泡相反。由DOM树最顶层元素一直到最精确的元素。

 1     <div id="parent">
 2         <div id="child">子元素</div>
 3     </div>
 4     <script>
 5         var parent = document.getElementById('parent');
 6         var child = document.getElementById('child');
 7         parent.addEventListener('click', function () {
 8             alert('parent');
 9         }, true)
10         child.addEventListener('click', function () { 11 alert('child'); 12 }, true) 13 //先弹出'parent'，后弹出'child' 14 </script>

DOM标准事件模型

因为两个不同的模型都有其优点和缺点，DOM标准支持捕获型和冒泡型，是它们俩的结合体。

分为三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

捕获阶段：当我们在DOM树的某个节点发生了一些操作（例如点击），就会有一个事件发射过去，这个事件从Window发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程就是捕获阶段。

目标阶段：当事件不断的传递直到目标节点的时候，最终在目标节点上触发这个事件，就是目标阶段

冒泡阶段：事件开始时，由最具体的元素接收，然后逐级传播到较为不具体的节点。

转载于:https://www.cnblogs.com/lianglanlan/p/7910590.html