js委托实现
事件委托的概念
事件委托是一种利用事件冒泡机制的编程技巧，通过将事件监听器绑定在父元素而非每个子元素上，减少内存消耗并提升性能。当子元素触发事件时，事件会冒泡到父元素，父元素通过判断事件源（event.target）来执行对应逻辑。
基本实现步骤
绑定父元素监听器
document.getElementById('parent').addEventListener('click', function(event) {
// 检查事件源是否为需要处理的子元素
if (event.target.matches('.child')) {
console.log('子元素被点击', event.target);
}
});动态元素支持 事件委托天然支持动态添加的子元素，无需重新绑定监听器：
// 动态添加子元素后仍能触发委托事件
document.getElementById('parent').appendChild(document.createElement('div'));进阶应用场景
多类型子元素区分
通过matches()方法或classList判断不同子元素：
parent.addEventListener('click', (event) => {
if (event.target.matches('.btn-edit')) {
handleEdit(event.target.dataset.id);
}
else if (event.target.matches('.btn-delete')) {
handleDelete(event.target.dataset.id);
}
});性能优化对比
- 传统方式：为100个子元素绑定100个监听器
- 委托方式：1个父元素监听器 + 条件判断 内存占用减少约99%（仅理论估算值）
注意事项
阻止冒泡干扰
若子元素需要单独阻止冒泡，需使用event.stopPropagation()：
childElement.addEventListener('click', (e) => e.stopPropagation());精确目标匹配
使用closest()处理嵌套结构：
parent.addEventListener('click', (e) => {
const item = e.target.closest('.list-item');
if (item) {
// 处理逻辑
}
});浏览器兼容方案
对于不支持matches()的老旧浏览器，可使用以下替代方案：
// 使用className判断
if (event.target.className.indexOf('child') !== -1) { ... }
// 或tagName判断
if (event.target.tagName === 'BUTTON') { ... }
