js委托实现
事件委托的概念
事件委托是一种利用事件冒泡机制，将多个子元素的事件监听统一绑定到父元素上的技术。通过判断事件触发时的目标元素（event.target），实现对不同子元素的差异化处理。
事件委托的优势
- 减少内存消耗：无需为每个子元素单独绑定事件，只需在父元素上绑定一次。
- 动态元素支持：新增的子元素自动继承事件处理逻辑，无需重新绑定。
- 性能优化：减少事件绑定数量，提升页面响应速度。
实现事件委托的步骤
1. 绑定父元素事件
通过addEventListener将事件监听器绑定到父元素上。例如监听点击事件：
document.getElementById('parent').addEventListener('click', function(event) {
// 事件处理逻辑
});2. 识别目标元素
通过event.target获取实际触发事件的子元素：
const target = event.target;3. 条件判断处理
根据目标元素的特征（如class、tagName等）执行不同操作：
if (target.classList.contains('btn')) {
console.log('按钮被点击');
} else if (target.tagName === 'SPAN') {
console.log('文字被点击');
}实际应用示例
场景：处理动态生成的列表项点击
<ul id="itemList">
<li>苹果</li>
<li>香蕉</li>
<!-- 后续可能动态添加更多li -->
</ul>document.getElementById('itemList').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
console.log('选中:', event.target.textContent);
}
});注意事项
- 使用
event.currentTarget获取事件绑定的元素（父元素） - 某些元素可能需要阻止事件冒泡（
event.stopPropagation()） - 对于表单元素需注意默认行为的处理（
event.preventDefault()）
兼容性处理
对于更复杂的选择器匹配，可使用Element.matches()方法：
if (event.target.matches('.item .delete-btn')) {
// 处理删除按钮点击
}如需支持老旧浏览器，可使用polyfill或手动实现选择器匹配逻辑。
