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 开发中的一项多功能技术。

打印页面