javascript事件冒泡,事件捕獲和事件委托詳解

更新時間：2021年11月10日 08:40:04 作者：Patty_2000

這篇文章主要介紹了javaScript 事件冒泡,事件捕獲和事件委托的相關資料,需要的朋友可以參考下，希望能夠給你帶來幫助

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

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

js事件捕獲一般通過DOM2事件模型addEventListener來實現(xiàn)的：

target.addEventListener(type, listener, useCapture)

第三個參數(shù)默認設置為false，表示在冒泡階段出發(fā)事件，設置為true時表示在捕獲階段觸發(fā)，一般我們工作中似乎很少使用事件捕獲。但還是要理解一下

<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

阻止事件冒泡

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

一般，使用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操作可以提高網(wǎng)頁性能，當一個頁面的父級元素和很多子級元素都需要操作同一件事件的時候，我們不可能每個元素都去給它綁定一個事件

<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>