冒泡兩字會讓我聯(lián)想想起泡泡特愿，泡泡是往上飛的對吧仲墨？
或者像水中魚兒吐泡泡一樣，那個泡泡從產(chǎn)生的起點往上浮洽议。
事件冒泡原理也是相同的宗收，從下至上。
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
圖中點擊我是孩子，孩子后面會出現(xiàn)老爸和祖宗膳叨。點擊老爸洽洁，后面會出現(xiàn)我是祖宗。
事件捕獲與事件冒泡完全相反菲嘴。是從上至下到指定元素饿自。
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
點擊我是孩子昭雌，首先出現(xiàn)祖宗、老爸最后出現(xiàn)目標元素健田。點擊我是老爸首先出現(xiàn)祖宗烛卧。
注意：addEventListener()必須用removeEventListener()解除
-------以上如有錯誤的地方希望大神們可以指出妓局，感謝总放！
