解释 JavaScript 中的事件委托

TL;DR

事件委托是 JavaScript 中的一种技术，它将单个事件监听器附加到父元素，而不是将事件监听器附加到多个子元素。当子元素上发生事件时，该事件会冒泡到 DOM 树中，父元素的事件监听器会根据目标元素处理该事件。

事件委托具有以下优点：

提高性能：附加单个事件监听器比将多个事件监听器附加到各个元素更有效，尤其是在处理大型或动态列表时。这减少了内存使用并提高了整体性能。
简化事件处理：使用事件委托，您只需要在父元素的事件监听器中编写一次事件处理逻辑。这使得代码更易于维护和更新。
动态元素支持：事件委托会自动处理父元素中动态添加或删除元素的事件。当 DOM 结构发生变化时，无需手动附加或删除事件监听器

但是，请注意：

确定触发事件的目标元素非常重要。
并非所有事件都可以被委托，因为它们不会冒泡。不冒泡的事件包括：focus、blur、scroll、mouseenter、mouseleave、resize 等。

事件委托

事件委托是 JavaScript 中用于通过将单个事件监听器附加到公共祖先元素来有效管理和处理多个子元素上的事件的设计模式。此模式在您有大量相似元素（例如列表项）并希望优化事件处理的场景中特别有价值。

事件委托的工作原理

将监听器附加到公共祖先：您将单个事件监听器附加到 DOM 层次结构中较高的公共祖先元素，而不是将各个事件监听器附加到每个子元素。
事件冒泡：当子元素上发生事件时，它会通过 DOM 树冒泡到公共祖先元素。在此传播过程中，公共祖先上的事件监听器可以拦截和处理该事件。
确定目标：在事件监听器中，您可以检查事件对象以识别事件的实际目标（触发事件的子元素）。您可以使用 event.target 或 event.currentTarget 等属性来确定与哪个特定的子元素进行了交互。
根据目标执行操作：根据目标元素，您可以执行所需的操作或执行特定于该元素的代码。这允许您使用单个事件监听器处理多个子元素的事件。

事件委托的优点

效率：事件委托减少了事件监听器的数量，从而提高了内存使用率和性能，尤其是在处理大量元素时。
动态元素：它可以与动态添加或删除的子元素无缝协作，因为公共祖先会继续侦听它们的事件。

例子

这是一个简单的例子：

// HTML:
// <ul id="item-list">
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
// </ul>

const itemList = document.getElementById('item-list');

itemList.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log(`Clicked on ${event.target.textContent}`);
  }
});

在此示例中，单个 click 事件监听器附加到 <ul> 元素。当 <li> 元素上发生 click 事件时，该事件会冒泡到 <ul> 元素，事件监听器会检查目标元素的标签名称以确定是否单击了列表项。检查 event.target 的身份至关重要，因为 DOM 树中可能存在其他类型的元素。

用例

事件委托通常用于以下场景：

处理单页应用程序中的动态内容

// HTML:
// <div id="button-container">
//   <button>Button 1</button>
//   <button>Button 2</button>
// </div>
// <button id="add-button">Add Button</button>

const buttonContainer = document.getElementById('button-container');
const addButton = document.getElementById('add-button');

buttonContainer.addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    console.log(`Clicked on ${event.target.textContent}`);
  }
});

addButton.addEventListener('click', () => {
  const newButton = document.createElement('button');
  newButton.textContent = `Button ${buttonContainer.children.length + 1}`;
  buttonContainer.appendChild(newButton);
});

在此示例中，click 事件侦听器附加到 <div> 容器。当动态添加并单击一个新按钮时，容器上的事件侦听器会处理 click 事件。

通过避免为更改的元素附加和删除事件侦听器来简化代码

// HTML:
// <form id="user-form">
//   <input type="text" name="username" placeholder="Username">
//   <input type="email" name="email" placeholder="Email">
//   <input type="password" name="password" placeholder="Password">
// </form>

const userForm = document.getElementById('user-form');

userForm.addEventListener('input', (event) => {
  const { name, value } = event.target;
  console.log(`Changed ${name}: ${value}`);
});

在此示例中，单个 input 事件侦听器附加到表单元素。它可以响应所有子输入元素的输入更改，从而简化代码，每个 <input> 元素使用一个事件侦听器。

陷阱

请注意，事件委托会带来某些陷阱：

目标处理不正确： 确保正确识别事件目标，以避免意外操作。
并非所有事件都可以委托/冒泡：并非所有事件都可以委托，因为它们不会冒泡。不冒泡的事件包括：focus、blur、scroll、mouseenter、mouseleave、resize 等。
事件开销： 虽然事件委托通常更有效，但需要在根事件侦听器中编写复杂的逻辑来识别触发元素并做出适当的响应。如果管理不当，这可能会引入开销，并且可能更复杂。

JavaScript 框架中的事件委托

在 React 中，事件处理程序附加到 React 根的 DOM 容器中，React 树被渲染到该容器中。即使将 onClick 添加到子元素，实际的事件侦听器也会附加到根 DOM 节点，利用事件委托来优化事件处理并提高性能。

当事件发生时，React 的事件侦听器会捕获它，并根据其内部簿记确定哪个 React 组件呈现了目标元素。然后，React 通过使用合成事件对象调用处理程序函数，将事件分派给相应的组件的事件处理程序。此合成事件对象包装了本机浏览器事件，提供了跨不同浏览器的一致接口，并捕获了有关事件的信息。

通过使用事件委托，React 避免将单个事件处理程序附加到每个组件实例，这将产生巨大的开销，尤其对于大型组件树。相反，React 利用浏览器的本机事件冒泡机制来捕获根处的事件并将它们分发到相应的组件。