Javascript中的委托

Javascript中的委托（Delegation），也被称为委托事件（Event delegation），是一种常用的编程技术，可用于提高代码的效率和可维护性。委托机制允许我们将事件处理程序添加到它们的容器元素中，而不是每个单独的子元素上。当发生事件时，事件将“委托”到容器元素，然后通过冒泡机制找到实际发生事件的目标元素。这个机制可以减少事件处理程序的数量，避免重复代码，同时也能让代码更具可读性。

委托的实现

委托机制依赖于事件的冒泡机制。在DOM中，当一个元素上的事件被触发时，它会向上冒泡，直到到达文档根节点。利用这个机制，我们可以把事件处理程序添加到容器元素上，然后在事件冒泡到目标元素时执行相应的处理程序。

示例代码

// HTML结构
<ul id="list">
  <li>apple</li>
  <li>banana</li>
  <li>cherry</li>
</ul>

// Javascript代码
const list = document.querySelector('#list');

list.addEventListener('click', function(event) {
  if (event.target.nodeName === 'LI') {
    console.log(event.target.innerText);
  }
});

在上面的代码中，我们为列表容器元素（ul）添加了一个“click”事件处理程序，当点击列表项（li）时，会打印列表项的文本内容。由于点击事件会冒泡到容器元素，我们可以通过判断事件目标元素（event.target）的节点类型来确定是否点击了列表项。

委托的优点

• 减少重复代码：通过把事件处理程序添加到容器元素上，我们可以避免为每个子元素添加事件处理程序而产生重复代码。
• 动态绑定事件：当我们添加或删除子元素时，无需再次添加或删除事件处理程序。
• 提高性能：由于事件处理程序绑定在容器元素上，事件冒泡的路径更短，因此事件处理程序的执行速度更快。

委托的注意事项

• 事件目标元素在触发事件时可能是任何子元素，因此应该对目标元素的类型进行检查，以使处理程序只对正确的元素生效。
• 利用事件冒泡机制时，应当避免在父元素和子元素之间有其他的元素阻止事件冒泡，否则事件处理程序可能无法正确执行。
• 对于某些特殊场景的元素，例如input元素，event.target节点可能不等于我们期望的节点。在这种情况下，可以使用事件委托机制的冒泡或捕获阶段来处理事件。