JavaScript - 事件委託

JavaScript 中的事件委託是一種技術，它允許我們將單個事件監聽器附加到父元素，然後使用事件物件來確定哪個子元素觸發了該事件。這樣，我們就可以使用單個事件監聽器處理多個事件，並避免向 DOM 新增過多的事件監聽器。

事件委託的步驟

1. 將監聽器附加到共同祖先

將單個事件監聽器附加到父元素，封裝您希望監視的元素；這是代替為每個元素附加單獨的事件監聽器。使用諸如 addEventListener 之類的方法來實現高效的實現。

2. 檢查目標元素

在事件處理程式中檢查 event.target 屬性，以精確定位在其共同祖先中觸發事件的特定元素。常見的檢查包括仔細檢查 tagName、classList 或其他目標元素屬性。

3. 執行所需的操作

根據已識別的目標元素和任何指定的標準，執行所需的操作或功能。這可能包括修改內容、處理按鈕點選或執行與事件相關的任何自定義邏輯。

事件委託示例

示例：列表項點選

在此示例中，我們使用事件委託來熟練地管理動態變化的教程列表上的點選。<ul> 元素充當所有列表項的共享祖先，並且附加了一個單獨的事件監聽器。

點選教程時，<li> 會透過我們精心製作的事件處理程式將自身識別為目標；因此，能夠在控制檯中記錄該特定教程的內容。這演示了事件委託在管理動態列表中採用簡化和可擴充套件方法。

<!DOCTYPE html>
<html>
<head>
   <style>
      ul {list-style-type: none; padding: 0;}
      li {margin: 5px; 
         padding: 10px;
         border: 1px solid #ccc;
         cursor: pointer; 
         max-width: 30%;
      }
   </style>
</head>
<body>
   <ul id="myList">
      <li>Tutorial 1</li>
      <li>Tutorial 2</li>
      <li>Tutorial 3</li>
      <li>Tutorial 4</li>
      <li>Tutorial 5</li>
   </ul>
   <div id = "output"></div>
   <script>
      const output = document.getElementById("output");
	  const myList = document.getElementById("myList")
      myList.addEventListener("click", function(event) {
         if (event.target.tagName === "LI") {
            output.innerHTML += "Tutorial clicked: " + 
			event.target.textContent + "<br>";
         }
      });
   </script>
</body>
</html>

示例：表單控制元件更改

在此處使用事件委託允許監視和記錄表單控制元件值的變化：<form> 元素充當共同祖先，而 input 事件監聽器捕獲輸入欄位中的更改。該指令碼透過檢查其處理程式中的目標元素來確認事件確實與 <input> 相關。因此，訊息記錄了已修改輸入的名稱和新值：此操作不僅展示了事件委託的適應性，還展示了其在管理動態表單互動方面的效率。

<!DOCTYPE html>
<html>
<body>
   <form id="myForm">
      <input type="text" name="username" placeholder="Username">
      <input type="password" name="password" placeholder="Password">
      <button type="button">Submit</button>
   </form>
   <div id="message"></div>
   <script>
      const messageElement = document.getElementById("message");
	  const myForm = document.getElementById("myForm")
      myForm.addEventListener("input", function(event) {
         if (event.target.nodeName === "INPUT") {
            messageElement.innerHTML += 
			"Input changed: " + event.target.name + 
            " - New value: " + event.target.value+'<br>';
         }
      });
   </script>
</body>
</html>

在單個事件監聽器可以有效地管理多個元素的互動的情況下，事件委託非常有價值，從而減少了冗餘並提高了效能。常見用例包括處理動態列表、表單互動、表格操作、手風琴或選項卡式介面、樹結構、下拉選單、多步向導、輪播和各種互動式 UI 元件。它簡化了程式碼結構，確保一致性，並很好地適應動態內容更改，使其成為 Web 開發中的一項多功能技術。

列印頁面