事件冒泡是指當(dāng)一個(gè)元素上的事件被觸發(fā)后，該事件會(huì)從該元素開始向上冒泡，直到傳播到文檔對(duì)象，并且可以被其他元素捕獲。默認(rèn)情況下，事件是先捕獲后冒泡。如果希望事件先冒泡后獲取，可以使用以下兩種方法之一：

1. 使用事件委托（Event Delegation）

事件委托是一種通過在其父元素上監(jiān)聽事件并利用事件冒泡來處理其子元素上的事件的技術(shù)。例如，如果有一個(gè)包含多個(gè)按鈕的列表，并且希望在單擊每個(gè)按鈕時(shí)執(zhí)行相同的操作，可以將單擊事件監(jiān)聽器添加到列表元素上，并使用事件對(duì)象來獲取單擊的按鈕。

示例代碼：

<ul?id="myList">
??<li><button>Button?1</button></li>
??<li><button>Button?2</button></li>
??<li><button>Button?3</button></li>
</ul>

<script>
??const?myList?=?document.querySelector('#myList');
??myList.addEventListener('click',?(event)?=>?{
????if?(event.target.tagName?===?'BUTTON')?{
??????//?在這里處理單擊事件
????}
??});
</script>


在這個(gè)例子中，我們使用事件委托將單擊事件監(jiān)聽器添加到列表元素上，并在事件處理程序中檢查被單擊的元素是否為按鈕。這個(gè)方法可以確保事件先冒泡后獲取，因?yàn)槲覀儗⒈O(jiān)聽器添加到父元素上，而不是每個(gè)子元素上。

1. 使用 setTimeout()

另一種方法是將事件處理程序延遲一小段時(shí)間再執(zhí)行。在此期間，事件將繼續(xù)向上傳播并且可以被其他元素捕獲。然后，事件處理程序?qū)⒁砸环N稍微延遲的方式執(zhí)行，以便事件有時(shí)間傳播到父元素。

示例代碼：

myButton.addEventListener('click',?(event)?=>?{
??setTimeout(()?=>?{
????//?在這里處理單擊事件
??},?0);
});


在這個(gè)例子中，我們使用 setTimeout() 將事件處理程序延遲了 0 毫秒，以確保它以稍微延遲的方式執(zhí)行。這個(gè)方法可以確保事件先冒泡后獲取，因?yàn)槭录幚沓绦蛟谝恍《螘r(shí)間后執(zhí)行，以便事件有時(shí)間傳播到父元素。

以下是一個(gè)使用事件委托的案例代碼演示，該代碼演示了如何在單擊多個(gè)按鈕時(shí)執(zhí)行相同的操作：

HTML 代碼：

<ul?id="myList">
??<li><button>Button?1</button></li>
??<li><button>Button?2</button></li>
??<li><button>Button?3</button></li>
</ul>


JavaScript 代碼：

const?myList?=?document.querySelector('#myList');
myList.addEventListener('click',?(event)?=>?{
??if?(event.target.tagName?===?'BUTTON')?{
????//?在這里處理單擊事件
????console.log(`Clicked?button?with?text:?${event.target.textContent}`);
??}
});


在這個(gè)例子中，我們將單擊事件監(jiān)聽器添加到 myList 元素上，并使用 if 語句檢查被單擊的元素是否為按鈕。如果是，我們就會(huì)在控制臺(tái)中記錄被單擊的按鈕的文本內(nèi)容。由于我們使用了事件委托，因此無論用戶單擊哪個(gè)按鈕，事件處理程序都會(huì)在 myList 元素上執(zhí)行，并且事件對(duì)象中包含有關(guān)被單擊的按鈕的信息。這確保了事件先冒泡后獲取，因?yàn)槲覀儗⒈O(jiān)聽器添加到父元素上，而不是每個(gè)子元素上。

總結(jié)

在事件處理中，事件冒泡和事件捕獲是兩種常見的事件傳播機(jī)制。默認(rèn)情況下，事件先捕獲后冒泡。如果想要事件先冒泡后獲取，可以使用以下兩種方法之一：

1. 使用事件委托（Event Delegation）：將單個(gè)事件監(jiān)聽器添加到父元素上，以處理其子元素上的事件。由于事件冒泡會(huì)在整個(gè)文檔中傳播，因此在父元素上添加事件監(jiān)聽器可以確保事件先冒泡后獲取。

2. 使用 setTimeout()：將事件處理程序延遲一小段時(shí)間再執(zhí)行，以確保事件有時(shí)間傳播到父元素。由于事件冒泡是在異步方式下完成的，因此使用 setTimeout() 函數(shù)可以確保事件先冒泡后獲取。

在實(shí)際應(yīng)用中，可以根據(jù)需要選擇其中任何一種方法，以確保事件先冒泡后獲取。

倉(cāng)庫地址：https://github.com/webVueBlog/WebGuideInterview