SOURCE

var content = document.getElementById('content')
var btn = document.getElementById('btn')

// 直接获取元素绑定只会触发冒泡，不会触发捕获
// btn.onclick = function() {
// 	alert('btn')
// }
// content.onclick = function() {
// 	alert('content')
// }
// document.onclick = function() {
// 	alert('document')
// }

// 捕获
document.documentElement.addEventListener('click', function(e){
	console.log(e)
	console.log('document捕获', e.target.nodeName, e.currentTarget.nodeName)
}, true)
content.addEventListener('click', function(e){
	console.log(e)
	console.log('content捕获', e.target.nodeName, e.currentTarget.nodeName)
	 // 在捕获阶段阻止事件的传播
	e.stopPropagation()
}, true)
btn.addEventListener('click', function(e){
	console.log(e)
	console.log('btn捕获', e.target.nodeName, e.currentTarget.nodeName)
}, true)

// 冒泡
document.documentElement.addEventListener('click', function(e){
	console.log(e)
	console.log('document冒泡', e.target.nodeName, e.currentTarget.nodeName)
}, false)
content.addEventListener('click', function(e){
	console.log(e)
	console.log('content冒泡', e.target.nodeName, e.currentTarget.nodeName)
}, false)
btn.addEventListener('click', function(e){
	console.log(e)
	console.log('btn冒泡', e.target.nodeName, e.currentTarget.nodeName)
}, false)

<a href="https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html">参考</a>
<div id="content">
	content
	<span id="btn">
		button
	</span>
</div>

<img src="https://images2015.cnblogs.com/blog/1005354/201612/1005354-20161222125521823-1914047378.png" alt="" />
<ol>
	<li>一个完整的JS事件流是从window开始，最后回到window的一个过程</li>
	<li>事件流被分为三个阶段(1~5)捕获过程、(5~6)目标过程、(6~10)冒泡过程</li>
</ol>
<h5>阻止事件传播</h5>
<ol>
	<li>在支持addEventListener()的浏览器中，可以调用事件对象的stopPropagation()方法以阻止事件的继续传播。如果在同一对象上定义了其他处理程序，剩下的处理程序将依旧被调用，但调用stopPropagation()之后任何其他对象上的事件处理程序将不会被调用。不仅可以阻止事件在冒泡阶段的传播，还能阻止事件在捕获阶段的传播。</li>
	<li>IE9之前的IE不支持stopPropagation()方法，而是设置事件对象cancelBubble属性为true来实现阻止事件进一步传播。</li>
</ol>
<h5>注意点:</h5>
<ol>
	<li>IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议使用冒泡流</li>
	<li>直接获取元素onclick绑定只会触发冒泡，不会触发捕获，一个元素一次只能绑定一个事件处理函数，新绑定的事件处理函数会覆盖旧的事件处理函数；事件对象参数(e)仅非IE浏览器可用</li>
	<li>
		element.addEventListener('click', function(e){
        // ...
    }, false);
	　优点：该方法同时支持事件处理的捕获和冒泡阶段；事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)；在事件处理函数内部，this关键字引用当前元素；事件对象总是可以通过处理函数的第一个参数(e)捕获；可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件

　　缺点：IE不支持，你必须使用IE的attachEvent函数替代。</li>
</ol>

#content{
	width:150px;
	height:150px;
	background:red;
}
#btn{
	display:inline-block;
	width:80px;
	height:80px;
	background:green;
}