首先從字面意思來(lái)看：
preventDefault是指阻止默認(rèn)事件
stopPropagation是指停止傳播
javascript中的兩種“事件傳播”模式：
- 捕獲模式(capturing)：當(dāng)事件發(fā)生時(shí)，該事件首先被最外層元素接受到，然后依次向內(nèi)層元素傳播定踱。（從上向下嗤军，由外往里）
- 冒泡模式(bubbling)：當(dāng)事件發(fā)生時(shí)，該事件首先被最內(nèi)層元素接受到熄赡，然后依次向外層元素傳播详炬。（從下向上，由里往外）
preventDefault：
html：
<a id="open">open</a>
javascript：
document.getElementById("open").addEventListener("click",function(e){
console.log("in");
},true);
直接點(diǎn)擊open晰绎，控制臺(tái)會(huì)先輸出in寓落，然后跳轉(zhuǎn)到百度的頁(yè)面，在這里荞下，a標(biāo)簽的默認(rèn)事件是跳轉(zhuǎn)頁(yè)面伶选，click事件是我們自己添加的事件。
如果想只執(zhí)行我們添加的事件而不進(jìn)行跳轉(zhuǎn)尖昏，這時(shí)候需要添加preventDefault來(lái)阻止a標(biāo)簽的默認(rèn)事件
document.getElementById("inner").addEventListener("click",function(e){
e.preventDefault();
console.log("in");
},true);
這是點(diǎn)擊open仰税，只會(huì)在控制臺(tái)輸出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);
效果：
注意現(xiàn)在addEventListener的最后一個(gè)參數(shù)為false，為冒泡模式抽诉，即由里往外傳播
這時(shí)點(diǎn)擊紅色區(qū)域（最里層in）
控制臺(tái)輸出：
可以看出事件由里往外傳播（in -> middle -> out）
如果這時(shí)候需要只顯示in陨簇，而不向外傳播，就可以給in對(duì)應(yīng)的標(biāo)簽事件使用stopPropagation
document.querySelector(".in").addEventListener("click",function(e){
e.stopPropagation();
console.log("in");
},false);
控制臺(tái)輸出：
現(xiàn)在我們將三個(gè)元素的addEventListener的最后一個(gè)參數(shù)改為true迹淌，這時(shí)候事件模式為捕獲模式河绽，即由外向里傳播
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);
這時(shí)點(diǎn)擊紅色區(qū)域（最里層in）
控制臺(tái)輸出：
可以看出事件由外往里傳播（out -> middle -> in）
如果這時(shí)候需要只顯示out钓简，而不向外傳播雄可，就可以給out對(duì)應(yīng)的標(biāo)簽事件使用stopPropagation
document.querySelector(".out").addEventListener("click",function(e){
e.stopPropagation();
console.log("out");
},true);
控制臺(tái)輸出：
