1、事件冒泡：在事件傳播過程中，當事件在一個元素上出發之後，事件會逐級傳播給先輩元素，直到document為止，有的瀏覽器可能到window為止。並不是所有的事件都有冒泡現象，比如如下幾個：blur事件 ，focus事件， load事件

2、事件委託：事件捕獲恰好與事件冒泡相反，它從頂層祖先元素開始，直到事件觸發元素。

事件捕獲一般通過DOM2事件模型addEventListener來實現的：

target.addEventListener(type,listener,useCapture)

第三個引數預設設定為false，表示在冒泡階段出發事件，設定為true時表示在捕獲階段觸發，一般我們工作中似乎很少使用事件捕獲。但還是要理解一下

<div id="box">
    <div id="middle">
        <div id="inner"&gt;</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.addEventListenhttp://www.cppcns.com
 
er("click",function(){console.log("inner")},true);
}
</script>
點選inner，控制檯依次輸出：box，middle，inner

阻止事件冒泡

平時會用到大量的事件冒泡事件，但是可能我們在某個子級標籤不需要傳遞事件給父級，這時候就需要阻止它事件的冒泡。

一般，使用stopPropagation來阻止事件的冒泡，IE中使用cancleBuble=true，stopPropagation也是事件物件(Event)的一個方法，作用是阻止目標元素的冒泡事件，但是會不阻止預設行為。

//阻止事件冒泡
let btna = document.getElementById('btn');
btna.onclick=function(e){
    window.event? window.event.cancelBubble = true : e.stopPropagation();
 };

3、事件委託：事件委託又可以叫事件代理，事件委託就是利用事件冒泡，只指定一個事件處理程式，就可以管理某一型別的所有事件。

益處：減少dom操作可以提高效能，當一個頁面的父級元素和很多子級元素都需要操作同一件事件的時候，我們不可能每個元素都去給它繫結一個事件

<ul id="getNum">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    &www.cppcns.comlt;li>5</li>
    <li>6</li>
</ul>
<sOFhxeUXcript>
let ptclick = document.getElementById('getNum');
let lilist = ptclick.querySelectorAll('li');
for(let i=0;i<lilist.lenhttp://www.cppcns.comgth;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>

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容！