參考文章：https://javascript.info/bubbling-and-capturing
一.事件冒泡和事件捕獲的理解
事件冒泡：事件到達目標節點後，會沿着捕獲階段的路線返回。同樣，所有經過的節點都會觸發對應的事件
事件捕獲：當一個事件觸發後，從window對象出發，不斷經過下級節點，直到抵達最終目標節點（event.target）。在事件達到目標節點之前就是事件捕獲的phrase。所有經過的節點都會觸發該事件。
下圖爲表格<table>的點擊行元素<td>時，事件捕獲階段--抵達目標階段--冒泡階段:
我們很少需要在事件捕獲階段進行操作，所以通常會忽略掉這個階段。
elem.
type,listener,useCaptureaddEventListener()
- type: 必須,String類型,事件類型
- listener: 必須,函數體或者JS方法
- useCapture: 可選,boolean類型。指定事件是否發生在捕獲階段。默認爲false,事件發生在冒泡階段。
<body>
<div id="fa"></div>
<script>
// 事件冒泡
let fa = document.getElementById('fa');
window.addEventListener("click",function(e){console.log("window")})
document.addEventListener("click",function(e){console.log("document")})
document.body.addEventListener("click",function(e){console.log("body")})
fa.addEventListener("click",function(e){console.log("fa");})
//元素觸發事件的打印順序就是 fa body document window
</script>
</body>
二.事件代理（委託）
事件委託就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。
利用elem.addEventListener（）函數可以得到
<div id="fa">
<div id="son1">son1</div>
<div id="son2">son2</div>
<div id="son3">son3</div>
</div>
<script>
let fa = document.getElementById('fa');
fa.addEventListener("click",function(e){
console.log(e.target);
})
//點擊son1時，打印結果爲<div id="son1">son1</div>
//點擊son2時，打印結果爲<div id="son2">son2</div>
//點擊son3時，打印結果爲<div id="son3">son3</div>
</script>
事件委託的優點：
（1）（比如我們有100個li，每個li都有相同的click點擊事件，可能我們會用for循環的方法，來遍歷所有的li，然後給它們添加事件。） 提高性能:每一個函數都會佔用內存空間。每一個事件都會與dom節點進行交互，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多；如果使用事件委託，只需添加一個事件處理程序代理所有事件,所佔用的內存空間更少。
（2）動態監聽:使用事件委託可以自動綁定動態添加的元素,即新增的節點不需要主動添加也可以一樣具有和其他元素一樣的事件。
三.阻止事件冒泡
event.stopPropagation();可以阻止事件冒泡
冒泡的使用是很便捷的。英文文檔明確說明，沒有必要的需求不要阻止冒泡！因爲使用event.stopPropagation();阻止冒泡可能會給後續的工作留下一些隱患，如後面需求需要父級監聽子級的事件發生來做分析判斷，但我們又阻止了冒泡，父級無法就無法監聽該事件。
其實沒有需求真的需要阻止冒泡，如果一個需求表面上看起來需要阻止冒泡才能實現，那麼我們可以想想其他方法來解決這個問題。一個方法是自定義事件。還有一個方法是利用事件代理，如三層嵌套元素祖父級，父級和子級，現在我的需求是點擊子級打印"son",點擊父級打印"father"。所以我們可以在祖父級元素上使用elem.addEventListener（）方法監聽e.target,即可以根據得到元素判斷處理觸發事件