事件委托通过事件冒泡将监听器绑定到父元素，统一处理子元素事件。例如为ul绑定click事件，通过判断e.target.nodeName === 'LI'来捕获li点击，减少重复绑定，节省内存，提升性能，支持动态添加元素，适用于列表、表格等大量子元素场景，但需注意非冒泡事件如focus需用focusin替代，并谨慎使用stopPropagation。
在JavaScript中处理事件时，如果为大量元素单独绑定事件监听器，不仅消耗内存，还可能影响性能。事件委托（Event Delegation）是一种优化技术，它利用事件冒泡机制，将事件监听器绑定到父元素上，通过判断事件源来统一处理子元素的事件，从而减少重复绑定。
事件冒泡与事件委托原理
DOM中的事件会从触发元素逐层向上传播（冒泡），直到根节点。事件委托正是基于这一机制：不需要给每个子元素都添加监听器，而是让父元素“代理”处理。
例如，一个包含几十个按钮的列表，传统做法是遍历所有按钮并分别绑定click事件。使用事件委托后，只需为列表容器绑定一次事件，然后在回调中判断e.target是否是目标元素即可。
实现方式与代码示例
以下是事件委托的基本实现：
HTML结构：
// <ul id="list">// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// </ul>
JavaScript代码：
if (e.target && e.target.nodeName === 'LI') {
console.log('Clicked on:', e.target.textContent);
}
});
这样即使后续动态添加新的<li>元素，也能被同一监听器捕获，无需重新绑定。
优势与适用场景
- 减少内存占用：避免为多个元素重复创建监听函数
- 提升性能：尤其适用于列表、表格等含大量子项的结构
- 支持动态内容：新增的子元素自动生效，无需额外绑定
- 简化代码维护：统一逻辑处理，便于修改和调试
常见应用场景包括动态列表操作、标签页切换、菜单栏交互等需要频繁增删DOM元素的情况。
注意事项与局限性
并非所有事件都能冒泡，如focus、blur等，此时可改用focusin和focusout。另外，需注意选择器判断的准确性，避免误触发。
合理使用e.stopPropagation()防止不必要的事件传播，但不要滥用，以免破坏委托逻辑。
基本上就这些，掌握事件委托能让JS事件处理更高效且易于维护。不复杂但容易忽略细节。
