首先從字面意思來看：
preventDefault是指阻止默認事件
stopPropagation是指停止傳播
javascript中的兩種“事件傳播”模式：
- 捕獲模式(capturing)：當事件發生時，該事件首先被最外層元素接受到，然后依次向內層元素傳播。（從上向下，由外往里）
- 冒泡模式(bubbling)：當事件發生時，該事件首先被最內層元素接受到，然后依次向外層元素傳播。（從下向上，由里往外）
preventDefault：
html：
<a id="open">open</a>
javascript：
document.getElementById("open").addEventListener("click",function(e){
console.log("in");
},true);
直接點擊open，控制臺會先輸出in，然后跳轉到百度的頁面，在這里，a標簽的默認事件是跳轉頁面，click事件是我們自己添加的事件。
如果想只執行我們添加的事件而不進行跳轉，這時候需要添加preventDefault來阻止a標簽的默認事件
document.getElementById("inner").addEventListener("click",function(e){
e.preventDefault();
console.log("in");
},true);
這是點擊open，只會在控制臺輸出in
stopPropagation：
html：
<div class="out">
out
<div class="middle">
middle
<div class="in">in</div>
</div>
</div>
css：
.out{
width:300px;
height:300px;
border:1px solid #000;
padding:10px;
box-sizing:border-box;
background:#ddd;
}
.middle{
width:200px;
height:200px;
border:1px solid #000;
padding:10px;
box-sizing:border-box;
background:skyblue;
}
.in{
width:100px;
height:100px;
border:1px solid #000;
padding:10px;
box-sizing:border-box;
background:tomato;
}
javascript：
document.querySelector(".out").addEventListener("click",function(e){
console.log("out");
},false);
document.querySelector(".middle").addEventListener("click",function(e){
console.log("middle");
},false);
document.querySelector(".in").addEventListener("click",function(e){
console.log("in");
},false);
效果：
注意現在addEventListener的最后一個參數為false，為冒泡模式，即由里往外傳播
這時點擊紅色區域（最里層in）
控制臺輸出：
可以看出事件由里往外傳播（in -> middle -> out）
如果這時候需要只顯示in，而不向外傳播，就可以給in對應的標簽事件使用stopPropagation
document.querySelector(".in").addEventListener("click",function(e){
e.stopPropagation();
console.log("in");
},false);
控制臺輸出：
現在我們將三個元素的addEventListener的最后一個參數改為true，這時候事件模式為捕獲模式，即由外向里傳播
document.querySelector(".out").addEventListener("click",function(e){
console.log("out");
},true);
document.querySelector(".middle").addEventListener("click",function(e){
console.log("middle");
},true);
document.querySelector(".in").addEventListener("click",function(e){
console.log("in");
},true);
這時點擊紅色區域（最里層in）
控制臺輸出：
可以看出事件由外往里傳播（out -> middle -> in）
如果這時候需要只顯示out，而不向外傳播，就可以給out對應的標簽事件使用stopPropagation
document.querySelector(".out").addEventListener("click",function(e){
e.stopPropagation();
console.log("out");
},true);
控制臺輸出：
