js委托实现
事件委托的概念
事件委托是一种利用事件冒泡机制的技术，将子元素的事件监听器绑定到父元素上。通过判断事件触发时的目标元素（event.target），动态执行对应的逻辑。这种方式能减少内存消耗，尤其适用于动态生成的子元素。
实现事件委托的步骤
1. 绑定父元素监听器
选择共同的父元素，为其添加事件监听。例如，监听<ul>的点击事件而非每个<li>：
document.getElementById('parent').addEventListener('click', function(event) {
// 事件处理逻辑
});2. 识别目标元素
通过event.target获取实际触发事件的子元素，配合matches方法或属性检查过滤无关元素：
if (event.target.matches('li.className')) {
// 处理特定子元素的逻辑
}3. 动态响应事件
根据目标元素执行不同操作。例如，点击不同按钮触发不同功能：
const actions = {
btn1: () => console.log('Button 1 clicked'),
btn2: () => console.log('Button 2 clicked')
};
const handler = actions[event.target.dataset.action];
if (handler) handler();实际应用示例
场景：动态列表项点击
<ul id="taskList">
<li data-action="delete">Delete Item</li>
<li data-action="edit">Edit Item</li>
</ul>document.getElementById('taskList').addEventListener('click', (event) => {
const action = event.target.dataset.action;
if (action === 'delete') {
event.target.parentNode.removeChild(event.target);
} else if (action === 'edit') {
event.target.contentEditable = true;
}
});优势与注意事项
- 优势：减少事件监听器数量，支持动态元素，提升性能。
- 注意：确保事件冒泡未被阻止（如
stopPropagation），避免父元素过多导致事件误判。
通过事件委托，可以高效管理大量相似元素的事件响应，尤其适合动态内容或组件化开发场景。
