像您一樣學習 JavaScript 中的事件委託 5

將單一事件偵聽器附加到父元素，而不是向每個子元素添加單獨的偵聽器，這種技術稱為事件委託。這是因為事件冒泡，事件（如單擊）在 DOM 樹中從子節點向上移動到父節點。透過在父級處理事件，可以節省記憶體並提高效能，尤其是在處理大量子元素或動態添加的元素時。

它是如何運作的？

當子元素上觸發事件（例如點擊）時，它不會就此停止。該事件向上冒泡到其父級，依此類推，沿著 DOM 樹向上冒泡，直到到達文檔根。事件委託透過將事件偵聽器放置在所有目標子元素的共同祖先上來利用這一點。此祖先會偵聽從子元素冒出的事件，並根據某些條件（例如事件類型或觸發事件的特定子元素）處理它們。

事件委託範例

假設我們有一個按鈕列表，並且我們想要處理每個按鈕的點擊事件。我們可以向其父元素添加一個偵聽器，而不是向每個按鈕新增單擊事件偵聽器。

<ul id="buttonList">
  <li><button data-action="delete">Delete</button></li>
  <li><button data-action="edit">Edit</button></li>
  <li><button data-action="view">View</button></li>
</ul>

現在，我們不再在每個按鈕上新增點擊事件偵聽器，而是在父

中新增偵聽器。元素。

document.getElementById("buttonList").addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    const action = event.target.getAttribute("data-action");

    if (action === "delete") {
      console.log("Deleting item...");
    } else if (action === "edit") {
      console.log("Editing item...");
    } else if (action === "view") {
      console.log("Viewing item...");
    }
  }
});

點選事件監聽器附加到

元素（父元素）。在事件處理程序中，我們使用 event.target.tagName === "BUTTON" 檢查點擊的元素是否為按鈕。這確保我們只響應按鈕點擊。我們使用 data-action 屬性來決定要執行的操作（刪除、編輯或檢視）。這種方法更有效率且可擴展，特別是當我們有很多按鈕或動態添加新按鈕時。

動態元素的另一個例子

如果按鈕清單是動態產生的（例如，透過 JavaScript 新增按鈕），事件委託仍然可以完美運作，而無需重新附加事件偵聽器。

const ul = document.getElementById("buttonList");

// Dynamically adding new buttons
const newButton = document.createElement("li");
newButton.innerHTML = '<button data-action="share">Share</button>';
ul.appendChild(newButton);

// The same event listener on the parent will handle the new button
ul.addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    const action = event.target.getAttribute("data-action");
    console.log(action + " button clicked.");
  }
});

事件冒泡：事件委託之所以有效，是因為事件冒泡，子元素上觸發的事件會傳播到其祖先。

對於動態內容有效：由於我們將事件監聽器附加到父級，因此它適用於稍後添加到 DOM 的元素。

效能：減少附加和管理多個事件偵聽器的開銷，尤其是在有大量子元素的情況下。

事件委託是高效 DOM 事件處理的重要技術，尤其是在處理許多元素或動態內容時。

以上是像您一樣學習 JavaScript 中的事件委託 5的詳細內容。更多資訊請關注PHP中文網其他相關文章！