DOM事件流，冒泡 | 捕获 | 委托 ，详解
（一）DOM事件流
① 定义
DOM事件流包括
三个阶段：
- 捕获阶段
- 目标阶段
- 冒泡阶段
事件发生时会在元素节点之间按照特定的顺序传播，这个传播的过程就是DOM事件流
简单的说：事件的传播过程即DOM事件流
② 图解
③ 历史
当浏览器发展到第四代时（IE4及Netscape Communicator4），浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？要明白这个问题问的是什么，可以想象画在一张纸上的一组同心圆。如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是纸上所有的圆，两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果你单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上。换句话说，在单机按钮的同时，你也单击了按钮的容器元素，甚至也单击了整个页面。
事件流描述的是从页面中接受事件的顺序。但有意思的是，IE 和 Netscape 开发团队居然提出了差不多完全相反的概念，IE的事件流是冒泡流，而Netscape Communicator的事件流是事件捕获流。
(摘自《JavaScript高级程序设计》)
下面我用实例展现一下冒泡流和捕获流的不同之处。
（二）冒泡
我给分别给div、section、body、html、window设置了点击事件，然后只点击了div
事件的执行顺序是：小 → 大div → section → body → html → window
下面贴上代码（css部分就不贴了，问题不大）
html部分
<body>
<p>body</p>
<section>
<p>父盒子</p>
<div>子盒子</div>
</section>
</body>
JS部分
<script>
var oSection = document.querySelector("section");
var oDiv = document.querySelector("div");
var oHtml = document.documentElement;
var oBody = document.body;
oDiv.addEventListener("click",function(){
alert("我是子盒子")
})
oSection.addEventListener("click",function(){
alert("我是父盒子")
})
oHtml.addEventListener("click",function(){
alert("我是html")
})
oBody.addEventListener("click",function(){
alert("我是body")
})
window.addEventListener("click",function(){
alert("我是window")
})
</script>
（三）捕获
事件捕获如何触发呢？
这时需要用到 addEventListener( )方法的第三个参数（默认为false，即冒泡阶段），将第三个参数改为true，表示将此事件改为捕获阶段。
（ 如果不了解addEventListener( )方法的可以 查看文档）
接下来我们看一下事件在捕获阶段的触发顺序：
根据上面的代码，我们先把父盒子section的点击事件变为捕获阶段
oSection.addEventListener("click",function(){
alert("我是父盒子")
},true)
看看效果：
此时的执行顺序是：
section → div → body → html → window
因为此时父盒子section的点击事件在捕获阶段，所以先执行，然后其它的在冒泡阶段的事件开始往上冒泡。
现在，我们将所有的事件都变成捕获阶段，看看效果：
此时的执行顺序是：
window → html → body → section → div
与冒泡阶段的执行顺序完全相反。
总结
DOM事件流，冒泡，捕获并不难理解
往池塘里扔一块石头，石头击破水面慢慢沉入水底，由于水的压力把空隙里面的空气挤出，就会产生气泡往上冒。
石头从水面沉入水底比作捕获，气泡往上冒比作冒泡，再结合文章开头的图解，就好理解多了。
结语：若文章有错误的地方，烦请在评论区指出。当然，我会不定时的重新编辑写过的文章，查错及优化，希望能将最好的文章展现给读者。