文章不易，请关注公众号 毛毛虫的小小蜡笔，多多支持，谢谢。
DOM事件触发顺序
遵循两个原则：
1、先触发捕获阶段，然后到目标阶段，最后到冒泡阶段
2、目标阶段，按照代码顺序来触发，不区分捕获和冒泡
Demo
代码
<head>
<meta charset="utf-8">
<title>事件流</title>
<style>
#a {
100px;
height: 100px;
background: black;
margin: auto;
}
#b {
60px;
height: 60px;
background: red;
}
#c {
30px;
height: 30px;
background: green;
display: inline-block;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="c"></div>
</div>
</div>
<script>
var aObj = document.getElementById('a')
var bObj = document.getElementById('b')
var cObj = document.getElementById('c')
aObj.addEventListener('click', function (evt) {
console.log('a1')
}, true)
aObj.addEventListener('click', function (evt) {
console.log('a2')
}, false)
bObj.addEventListener('click', function (evt) {
console.log('b1')
}, true)
bObj.addEventListener('click', function (evt) {
console.log('b2')
}, false)
cObj.addEventListener('click', function (evt) {
console.log('c1')
}, true)
cObj.addEventListener('click', function (evt) {
console.log('c2')
}, false)
cObj.addEventListener('click', function (evt) {
console.log('c3')
}, true)
cObj.addEventListener('click', function (evt) {
console.log('c4')
}, false)
</script>
</body>
效果如下截图所示：
当点击绿色区域，输出顺序是这样的：a1,b1,c1,c2,c3,c4,b2,a2
其实，根据上面说的准则来判断就可以。
1、先触发捕获阶段，所以先输出a1和b1
详情 请查看：毛毛虫的小小蜡笔