快捷導(dǎo)航

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

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

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

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

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

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

target.addEventListener(type, listener, useCapture)

第三個(gè)參數(shù)默認(rèn)設(shè)置為false，表示在冒泡階段出發(fā)事件，設(shè)置為true時(shí)表示在捕獲階段觸發(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>
點(diǎn)擊inner，控制臺依次輸出：box，middle，inner

阻止事件冒泡

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

一般，使用stopPropagation來阻止事件的冒泡，IE中使用cancleBuble=true，stopPropagation也是事件對象(Event)的一個(gè)方法，作用是阻止目標(biāo)元素的冒泡事件，但是會不阻止默認(rèn)行為。

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

3、事件委托：事件委托又可以叫事件代理，事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。

益處：減少dom操作可以提高網(wǎng)頁性能，當(dāng)一個(gè)頁面的父級元素和很多子級元素都需要操作同一件事件的時(shí)候，我們不可能每個(gè)元素都去給它綁定一個(gè)事件

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