Quiz

解释事件委托

Web APIsJavaScript

在GitHub上编辑

事件委托是 JavaScript 中的一种设计模式，用于通过将单个事件监听器附加到共同的祖先元素，高效地管理和处理多个子元素上的事件。这个模式在你有大量类似元素（例如列表项）并希望简化事件处理的情况下尤为有价值。

事件委托的工作原理

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

事件委托的优点

效率：事件委托减少了事件监听器的数量，提高了内存使用和性能，特别是在处理大量元素时。
动态元素：它与动态添加或删除的子元素无缝配合，因为共同祖先继续监听它们的事件。

示例

以下是使用现代 ES6 语法的简单示例：

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

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

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

在此示例中，单个点击事件监听器附加到了<ul>元素上。当在<li>元素上发生点击事件时，事件冒泡到了<ul>元素，事件监听器检查目标的标签名称以识别单击的列表项。

用例

事件委托通常用于以下情况：

管理具有许多项目或行的列表、菜单或表格。
处理单页面应用程序中的动态内容。
通过避免为发生更改的元素附加和移除事件监听器来简化代码。

资源

在GitHub上编辑