什么是事件委托，为什么要使用它？

Question

什么是事件委托，为什么要使用它？

IT Interview Practice · Accepted Answer

**事件委托**是指将一个 listener 附加到共同的祖先元素，而不是为每个子元素分别附加 listener，并使用**事件冒泡**机制来识别实际被交互的子元素（通过 `event.target`）。 ```js // ❌ without delegation: one listener PER item (and broken for new items) document.querySelectorAll("li").forEach(li => li.addEventListener("click", handle)); // ✅ with delegation: ONE listener on the parent document.querySelector("ul").addEventListener("click", e => { const li = e.target.closest("li"); // find the clicked item if (li) select(li.dataset.id); }); ``` ## 工作原理当你点击 `

` 时，事件会**冒泡**上升：`li → ul → body → document`。`

` 子元素的点击事件，而 `e.target` 会告诉你具体是哪个元素被点击了。`closest("li")` 从目标元素向上遍历以找到预期的元素（也处理对内部元素的点击）。 ## 为什么这很重要 - **性能/内存**：一个 listener 代替数百或数千个。 - **自动适用于动态添加的元素** — 稍后添加的新 `
` 不需要新 listener，因为父元素已经在处理。 - **更简单的清理**：移除一个 listener，而不是很多。 ## 注意事项它依赖于冒泡，所以对于**不冒泡的事件**不适用（`focus`、`blur` — 改用 `focusin`/`focusout`）。这正是 React 内部使用的技术（整个应用的单个根 listener）。

相关问题

工作原理

为什么这很重要

注意事项