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> 相关。因此，消息会记录修改后的输入的名称和新值:此操作不仅展示了事件委托的适应性，还展示了其在管理动态表单交互方面的效率。

<!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 开发中一种用途广泛的技术。