事件捕獲
事件從最不精确的對象(document 對象)開始觸發，然後到最精确的對象（例如滑鼠點選時，最接近滑鼠的Dom節點）
事件冒泡
事件按照從最精确的事件目标（例如點選滑鼠時，最接近滑鼠的Dom節點）到最不精确的事件目标(document對象)的順序觸發。
二者的關系圖(仔細看看，很簡單！)
addEVentListener
addEventListener() 方法用于向指定元素添加事件句柄。
文法為：element.addEventListener(event, function, useCapture)
event: 指定事件名。
注意: 不要使用 “on” 字首。 例如，使用 “click” ,而不是使用 “onclick”。
function: 指定要事件觸發時執行的函數。
useCapture 指定事件是否在捕獲或冒泡階段執行。
true - 事件句柄在捕獲階段執行
false- 預設。事件句柄在冒泡階段執行
舉個栗子
兩個簡單的div嵌套,點選紅色的div，為兩個div都綁定點選事件
附上代碼：
<html>
<head>
<meta charset="utf-8">
<style>
#div1{
width: 100px;
height: 100px;
background: teal;
}
#div2{
width: 50px;
height: 50px;
margin: 0 auto;
background: indianred;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
<script>
document.getElementById("div1").addEventListener("click",function(){
console.log("外層事件觸發");
})
document.getElementById("div2").addEventListener("click",function(e){
console.log("内層事件觸發");
})
</script>
</body>
</html
這是我們正常綁定事件時的做法，而這樣的結果是：
這樣的原因就是因為事件的冒泡執行，首先點選紅色div時，浏覽器從document結點出發捕獲到紅色div上的事件，觸發它的事件（列印内層資訊），然後事件冒泡到紅色div的父級（梨色div），觸發父級的點選事件。是以有上述的結果。
但是有時候我們想點選那個就觸發哪個DOM節點的事件時，這時候就要阻止事件的冒泡了，像上例中的紅色div，此時隻需要在觸發它的點選事件時阻止事件的冒泡就行了
document.getElementById("div2").addEventListener("click",function(e){
console.log("内層事件觸發");
e.stopPropagation();
})
這樣就隻會觸發内層的事件了：
到此，事件捕獲與事件冒泡應該差不多了解了。
接下來講講addEventListener添加事件時的第三個參數。上面已經提出第三個參數 useCapture 為指定事件是否在捕獲或冒泡階段執行。
true - 事件句柄在捕獲階段執行
false- 預設。事件句柄在冒泡階段執行
了解起來其實很簡單，就是觸發事件的時機是向下捕獲事件的時候，還是冒泡的時候。我們将為兩個div都添加第三個參數為true:
document.getElementById("div1").addEventListener("click",function(){
console.log("外層事件觸發");
},true)
document.getElementById("div2").addEventListener("click",function(e){
console.log("内層事件觸發");
e.stopPropagation();
},true)
此時事件在捕獲階段就進行，也就是說第二個參數的函數會在捕獲階段就執行，是以得到的結果是：
事件捕獲與事件冒泡在JS中還是占據了比較重要的地位的，是以了解它們還是很有必要的。