冒泡两字会让我联想想起泡泡，泡泡是往上飞的对吧？
或者像水中鱼儿吐泡泡一样，那个泡泡从产生的起点往上浮。
事件冒泡原理也是相同的，从下至上。
Honeycam 2019-02-16 22-09-37.gif
假设我要点击的是div，点击后会一层一层的往上。
<div class="classv">
我是祖宗
<div class="actva">我是老爸
<div class="foo">我是孩子</div>
</div>
</div>
<script type="text/javascript">
var a = document.querySelector('.classv').addEventListener('click', function() {
console.log('我是祖宗')
}, false)
var b = document.querySelector('.actva').addEventListener('click', function() {
console.log('我是老爸')
}, false)
var c = document.querySelector('.foo').addEventListener('click', function() {
console.log('我是孩子')
}, false)
</script>
注意： addEventListener中有三个属性，第三个属性是布尔值。
Honeycam 2019-02-16 22-38-36.gif
图中点击我是孩子，孩子后面会出现老爸和祖宗。点击老爸，后面会出现我是祖宗。
事件捕获与事件冒泡完全相反。是从上至下到指定元素。
Honeycam 2019-02-16 22-48-38.gif
来个小案例
<div class="classv">
我是祖宗
<div class="actva">我是老大
<div class="foo">我是老幺</div>
</div>
</div>
<script type="text/javascript">
var a = document.querySelector('.classv').addEventListener('click', function() {
console.log('我是祖宗')
}, true)
var b = document.querySelector('.actva').addEventListener('click', function() {
console.log('我是老大')
}, true)
var c = document.querySelector('.foo').addEventListener('click', function() {
console.log('我是老幺')
}, true)
</script>
这个案例与前面的是相同，只是把addEventListener的第三属性改成true。
Honeycam 2019-02-16 22-36-02.gif
点击我是孩子，首先出现祖宗、老爸最后出现目标元素。点击我是老爸首先出现祖宗。
注意：addEventListener()必须用removeEventListener()解除
-------以上如有错误的地方希望大神们可以指出，感谢！
