js事件冒泡
javascript的事件傳播過程中，當事件在一個元素上出發之后，事件會逐級傳播給先輩元素，直到document為止，有的瀏覽器可能到window為止，這就是事件冒泡現象。
<div id="col">
<p>
<a id="btn" href="#">button</a>
</p>
</div>
<script>
let btnclick = document.getElementById('col');
btnclick.onclick=function(e){
console.log('1');
};
<script>
執行結果，當點擊a標簽時，也可以在控制台輸出1；但是a元素並沒有綁定click事件，這就是由於事件冒泡的現象，事件逐級傳播給先輩元素，點擊a——p——div，然后就可以執行對應的div綁定的事件。
特別說明：並不是所有的事件都有冒泡現象，比如如下幾個：blur事件 focus事件 load事件
js事件委托
事件委托又可以叫事件代理，事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。
事件委托的益處：我們都知道，減少dom操作可以提高網頁性能，當一個頁面的父級元素和很多子級元素都需要操作同一件事件的時候，我們不可能每個元素都去給它綁定一個事件，看下面例子：
<ul id="getNum">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
let ptclick = document.getElementById('getNum');
let lilist = ptclick.querySelectorAll('li');
for(let i=0;i<lilist.length;i++){
lilist[i].index = i;
};
ptclick.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
console.log(e.target.index);
};
</script>
點擊每個li元素都會打印對應的目標li的index值；
但是並不是所有的情況都適用於事件冒泡的，當出現父子級之間的注冊事件不一致時，就不適用。關於事件委托更加詳細的解釋，查https://www.cnblogs.com/liugang-vip/p/5616484.html
每個例子都很詳細的分析了。
js事件捕獲
事件捕獲恰好與事件冒泡相反，它從頂層祖先元素開始，直到事件觸發元素。
DOM標准同時支持捕獲事件模型和冒泡事件模型，但是，捕獲事件模型先發生。兩種事件流都會觸發DOM中的所有對象，從document對象開始，也在document對象結束。
js事件捕獲一般通過DOM2事件模型addEventListener來實現的：
target.addEventListener(type, listener, useCapture)
第三個參數默認設置為false，表示在冒泡階段出發事件，設置為true時表示在捕獲階段觸發，一般我們工作中似乎很少使用事件捕獲。但還是要理解一下，面試過程中沒少問過這類問題。
分析例子：
<div id="box">
<div id="middle">
<div id="inner"></div>
</div>
</div>
<script>
//事件捕獲
window.onload=function(){
let box=document.getElementById("box");
let middle=document.getElementById("middle");
let inner=document.getElementById("inner");
box.addEventListener("click",function(){console.log("box")},true);
middle.addEventListener("click",function(){console.log("middle")},true);
inner.addEventListener("click",function(){console.log("inner")},true);
}
</script>
當點擊inner綁定事件時，控制台會直接輸出，box，middle,inner
js阻止事件冒泡
平時開發過程中，會用到大量的事件冒泡事件，但是可能我們在某個子級標簽不需要傳遞事件給父級，這時候就需要阻止它事件的冒泡。
一般，使用stopPropagation來阻止事件的冒泡，IE中使用cancleBuble=true，stopPropagation也是事件對象(Event)的一個方法，作用是阻止目標元素的冒泡事件，但是會不阻止默認行為。
接上面事件冒泡的例子：
//阻止事件冒泡 let btna = document.getElementById('btn'); btna.onclick=function(e){ window.event? window.event.cancelBubble = true : e.stopPropagation(); };
此時，當點擊a標簽元素時，控制台就不會再打印出1；
阻止瀏覽器默認行為
開發過程中，總會出現各種瀏覽器的默認行為，這時候就需要阻止瀏覽器的默認行為，一般情況下，使用
preventDefault阻止瀏覽器的默認行為，在IE瀏覽器下，使用returnValue = false;
javascript的return false只會阻止默認行為，而是用jQuery的話則既阻止默認行為又防止對象冒泡。
//阻止瀏覽器的默認行為 function stopDefault( e ) { //一般情況下 if ( e && e.preventDefault ) e.preventDefault(); //IE中 else window.event.returnValue = false; return false; }