js实现委派
事件委派的概念
事件委派是一种利用事件冒泡机制，将子元素的事件监听绑定到父元素上的技术。通过判断事件触发时的目标元素（event.target），动态决定是否执行逻辑。这种方式能减少事件监听器的数量，提升性能，尤其适用于动态生成的子元素。
实现事件委派的核心步骤
1. 绑定父元素监听器
将事件监听器绑定到父元素（如 ul、table 等），而非每个子元素。父元素会捕获子元素冒泡的事件。
document.getElementById('parent').addEventListener('click', function(event) {
// 通过 event.target 判断实际点击的子元素
});2. 判断目标元素
使用 event.target 或 event.currentTarget 区分事件源。若需匹配特定子元素，可通过选择器或属性检查。
if (event.target.matches('li.item')) {
console.log('子元素被点击', event.target.textContent);
}3. 处理动态元素
事件委派天然支持动态添加的子元素，无需重新绑定监听器。新生成的子元素触发事件后会自动冒泡到父元素。
实际应用示例
场景：列表项点击事件
<ul id="taskList">
<li data-id="1">任务一</li>
<li data-id="2">任务二</li>
</ul>document.getElementById('taskList').addEventListener('click', (event) => {
const li = event.target.closest('li'); // 处理嵌套元素
if (li) {
console.log('任务ID:', li.dataset.id);
}
});场景：按钮组委派
通过 data-action 属性区分不同操作：
document.addEventListener('click', (event) => {
const action = event.target.dataset.action;
if (action === 'delete') {
deleteItem(event.target.dataset.id);
} else if (action === 'edit') {
editItem(event.target.dataset.id);
}
});注意事项
- 事件类型限制：委派适用于冒泡事件（如
click），不适用于不冒泡的事件（如focus）。 - 性能权衡：虽减少监听器数量，但父元素需处理所有子元素事件，复杂逻辑可能影响性能。
- 精确匹配：使用
closest()或matches()避免因子元素嵌套导致误判。
通过合理使用事件委派，可以显著优化代码结构和运行时效率。
