事件流：冒泡和捕獲

這是前端面試問題系列的第 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 關鍵字的資訊嗎？我寫了一篇關於它的文章。

事件捕捉

到目前為止我們只看到了一半的圖片。當單擊上面程式碼片段中的按鈕時，它不是接收該事件的第一個元素。 ？

事件流由三個階段組成：

1. 捕獲階段：事件從根元素流向目標元素。
2. 目標階段：在目標元素上接收事件。
3. 冒泡階段：事件開始傳播回根元素。

預設情況下，所有事件處理程序僅在目標階段和冒泡階段呼叫。若要在擷取階段呼叫事件處理程序，請傳遞 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>