54 lines
2.5 KiB
Plaintext
54 lines
2.5 KiB
Plaintext
---
|
|
title: 解释事件委托
|
|
---
|
|
|
|
事件委托是 JavaScript 中的一种设计模式，用于通过将单个事件监听器附加到共同的祖先元素，高效地管理和处理多个子元素上的事件。这个模式在你有大量类似元素（例如列表项）并希望简化事件处理的情况下尤为有价值。
|
|
|
|
## 事件委托的工作原理
|
|
|
|
1. **将监听器附加到共同的祖先元素**：与将单独的事件监听器附加到每个子元素不同，你将一个单一的事件监听器附加到 DOM 层次结构中较高的共同祖先元素上。
|
|
1. **事件冒泡**：当事件在子元素上发生时，它通过 DOM 树冒泡到共同祖先元素。在此传播期间，共同祖先上的事件监听器可以拦截并处理事件。
|
|
1. **确定目标**：在事件监听器内部，你可以检查事件对象以识别事件的实际目标（触发事件的子元素）。你可以使用`event.target`或`event.currentTarget`等属性来确定与哪个特定子元素进行了交互。
|
|
1. **根据目标执行操作**：根据目标元素，你可以执行所需的操作或执行特定于该元素的代码。这使你能够使用单个事件监听器处理多个子元素的事件。
|
|
|
|
## 事件委托的优点
|
|
|
|
1. **效率**：事件委托减少了事件监听器的数量，提高了内存使用和性能，特别是在处理大量元素时。
|
|
1. **动态元素**：它与动态添加或删除的子元素无缝配合，因为共同祖先继续监听它们的事件。
|
|
|
|
## 示例
|
|
|
|
以下是使用现代 ES6 语法的简单示例：
|
|
|
|
```js
|
|
// 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>`元素，事件监听器检查目标的标签名称以识别单击的列表项。
|
|
|
|
## 用例
|
|
|
|
事件委托通常用于以下情况：
|
|
|
|
- 管理具有许多项目或行的列表、菜单或表格。
|
|
- 处理单页面应用程序中的动态内容。
|
|
- 通过避免为发生更改的元素附加和移除事件监听器来简化代码。
|
|
|
|
## 资源
|
|
|
|
- [MDN Web 文档关于事件委托](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation)
|
|
- [JavaScript.info - 事件委托](https://javascript.info/event-delegation)
|