事件委托基于事件冒泡机制，将事件监听器绑定在父元素上，通过e.target判断触发源并执行逻辑。当子元素触发事件时，事件会冒泡至父元素，由父元素统一处理，从而减少监听器数量、提升性能，并支持动态添加的元素无需重新绑定事件。例如在ul上绑定click事件，通过判断e.target是否为button来执行相应操作，适用于大量动态子元素场景。掌握冒泡机制和target属性是实现关键。
事件委托的实现原理基于 JavaScript 的事件冒泡机制。当一个元素触发事件时，该事件会从目标元素开始，逐级向上传播到父级、祖先元素，直到根节点。利用这一特性，可以在父元素上绑定事件监听器，统一处理子元素的事件。
事件冒泡与事件捕获
DOM 事件流分为三个阶段：捕获阶段、目标阶段和冒泡阶段。事件委托主要依赖于冒泡阶段。例如，点击一个按钮时，事件先从 window 传播到目标元素（捕获），然后在目标元素上执行（目标阶段），最后从目标元素返回到 document（冒泡）。开发者通常在冒泡阶段进行事件委托。
如何实现事件委托
通过将事件监听器绑定在共同的父容器上，再根据事件对象的 target 属性判断具体触发事件的元素，从而执行相应逻辑。
常见实现方式：- 选中父容器并绑定事件，如
document.getElementById('list').addEventListener('click', handler) - 在事件回调中使用 e.target 获取实际被点击的子元素
- 通过元素标签名、类名或自定义属性判断是否需要处理该事件
- 执行对应操作，避免为每个子元素单独绑定事件
例如，一个动态列表中有多个按钮，无需为每个按钮绑定 click 事件，只需在 ul 上绑定一次：
立即学习“Java免费学习笔记（深入）”；
document.getElementById('list').addEventListener('click', function(e) {
if (e.target.tagName === 'BUTTON') {
console.log('按钮被点击:', e.target.textContent);
}
});
优势与适用场景
事件委托能显著减少内存消耗，提升性能，尤其适用于动态内容或大量子元素的场景。
优点包括：- 减少事件监听器数量，节省内存
- 自动支持动态添加的子元素，无需重新绑定
- 简化代码维护，统一处理逻辑
基本上就这些。掌握事件冒泡和 target 判断是实现事件委托的关键。
