這是前端面試問題系列的第 7 篇文章。如果您希望提高準備程度或保持最新狀態，請考慮加入前端訓練營？ .
事件冒泡與捕獲，都是DOM（文件物件模型）中的傳播機制。這兩種機制是相反的。
在事件冒泡中，事件在觸發目標元素（event.target）上的處理程序後向上傳播（冒泡）到文件的根元素。在其過程中，它會觸發父元素上的所有事件處理程序。
/* <div> <p>In the snippet above, when you click the button you'll see the following output in console:<br> </p> <pre class="brush:php;toolbar:false">"Button handler" "Container handler"
首先呼叫按鈕上的處理程序，並將 event.target 屬性設為按鈕，因為它啟動了事件。事件在到達根元素的過程中，會呼叫其父元素的事件處理程序。
幾乎所有事件都會冒泡，但也有一些例外，例如焦點事件不會冒泡。
您可以透過呼叫事件的 stopPropagation() 方法來停止冒泡。如果上面程式碼片段中按鈕的事件處理程序停止傳播，則不會呼叫容器的事件處理程序。
btn.addEventListener('click', function(event) {
console.log('Button handler!');
// ancestor elements won't receive the event
event.stopPropagation();
});
您可以透過存取 target.event 屬性來存取發起事件的元素。此外，可以使用 event.currentTarget.
存取正在執行處理程序的元素
container.addEventListener('click', function(event) {
console.log('Container handler!'); // 'Container handler!'
console.log(event.target); // btn
console.log(event.currentTarget); // container
console.log(this); // container
});
想要了解更多關於 this 關鍵字的資訊嗎？我寫了一篇關於它的文章。
到目前為止我們只看到了一半的圖片。當單擊上面程式碼片段中的按鈕時，它不是接收該事件的第一個元素。 ？
事件流由三個階段組成：
預設情況下，所有事件處理程序僅在目標階段和冒泡階段呼叫。若要在擷取階段呼叫事件處理程序，請傳遞 true 作為第三個參數。
el.addEventListener('click', () => {}, true);
// or to be more explicit
el.addEventListener('click', () => {}, { capture: true });
如果您在捕獲階段使用處理程序，則在冒泡階段不會呼叫它。
與冒泡類似，當在捕獲階段調用 event.stopPropagation() 時，它不會讓事件進一步流動，即在本例中沿著 DOM 向下流動。
在我們之前討論的程式碼片段中，如果容器在捕獲階段停止傳播，則永遠不會呼叫按鈕的處理程序。
/*
<div>
<p>這就是為什麼你應該總是有充分的理由使用 event.stopPropagation()。它可能會導致難以在複雜或深度嵌套的 DOM 樹中調試的意外問題。 </p>
<p>與冒泡相比，事件捕獲很少使用。冒泡有很多用例，例如「事件委託」——一種重要的效能模式。 </p>
<p>這篇文章為下一個主題－事件委託奠定了基礎。確保你理解它。有疑問嗎？將它們留在評論中。 ✌️</p>
<hr>
<h2>
概括
</h2>
<ol>
<li>事件流由三個階段組成：捕獲、目標和冒泡階段。 </li>
<li>在捕獲階段，事件從根元素向下流向目標(event.target)元素。 </li>
<li>在冒泡階段，事件從目標元素流向根元素。 </li>
<li>預設情況下，僅在目標階段和冒泡階段呼叫所有事件處理程序。 </li>
<li>透過在 addEventListener 函數中傳遞第三個參數，您可以在擷取階段設定處理程序。 </li>
<li>在事件流中的任何一點，呼叫 event.stopPropagation() 將阻止事件進一步流動。 </li>
</ol>
<hr>
<p>喜歡你剛剛讀到的內容嗎？ ？考慮加入前端訓練營的候補名單。 </p>
<p>留下一些反應“？”和評論，因此這篇文章可以幫助像您這樣的其他開發人員。 ？ </p>
</div>
以上是事件流：冒泡和捕獲的詳細內容。更多資訊請關注PHP中文網其他相關文章！
