事件委托利用事件冒泡机制，将子元素的事件监听绑定到父元素上。当子元素触发事件时，事件会冒泡到父元素处理，从而避免为每个子元素单独绑定事件。这减少了内存占用，支持动态添加的元素自动响应事件，并简化了代码维护。例如，在ul上绑定click事件，通过e.target判断具体点击的li元素，即使后续新增li也能正常工作。适用于列表、表格等结构，需注意事件是否冒泡及合理使用matches()方法精准匹配目标。
事件委托（Event Delegation）的核心思想是利用JavaScript的事件冒泡机制，将子元素的事件监听器绑定到其父元素上，而不是直接给每个子元素都绑定事件。这样即使页面中动态添加了新的子元素，也能正常响应事件。
事件冒泡是什么
在DOM结构中，当一个元素触发事件（如点击），这个事件会从该元素开始，逐级向上传播到根节点。比如你点击一个button，事件会依次经过它的父div、body，直到document。
利用这个特性，我们可以在外层容器监听内部所有子元素的事件，而不需要为每一个单独设置监听函数。
为什么需要事件委托
- 减少内存占用：不用为大量子元素重复绑定事件处理函数
- 支持动态元素：新插入的DOM元素无需重新绑定事件
- 简化代码维护：统一在一个地方处理同类事件
例如有一个很长的列表（ul > li），如果每个li都绑定click事件，性能开销大。使用事件委托后，只需给ul绑定一次事件即可。
如何实现事件委托
通过检查事件对象的target属性来判断具体是哪个子元素触发了事件。
document.getElementById('parent').addEventListener('click', function(e) {
if (e.target && e.target.nodeName === 'LI') {
console.log('点击的是:', e.target.textContent);
}
});
上面这段代码中，点击任意li都会被父级捕获，并通过e.target识别出实际点击的目标。即使后续用JS新增li，它们依然能被正确处理。
适用场景和注意事项
适合用于列表、表格、菜单等包含多个相似子项的结构。
- 注意事件类型是否支持冒泡（大多数常用事件都支持）
- 避免过度委托，逻辑复杂的组件建议封装独立事件系统
- 使用matches()方法可以更精准地匹配选择器
基本上就这些，掌握事件冒泡和target的使用，事件委托就不难理解了。
