js实现事件委托
事件委托的基本概念
事件委托是一种利用事件冒泡机制的技术，通过将事件监听器绑定到父元素而非每个子元素上，统一管理子元素的事件。这种方式能减少内存占用并动态处理新增元素。
实现事件委托的步骤
绑定父元素监听器
选择父元素（如 ul）作为事件委托的容器，监听目标事件（如 click）：
document.getElementById('parent').addEventListener('click', function(event) {
// 事件处理逻辑
});判断目标元素
通过 event.target 获取实际触发事件的子元素，根据需求过滤非目标元素（如只处理 li）：
if (event.target.tagName === 'LI') {
console.log('子元素被点击:', event.target.textContent);
}动态元素支持
事件委托天然支持动态添加的子元素，无需重新绑定监听器。例如新增 li 后直接触发父元素监听：
const newItem = document.createElement('li');
newItem.textContent = 'New Item';
document.getElementById('parent').appendChild(newItem);实际应用示例
以下是一个完整的事件委托示例，实现点击列表项高亮：
document.getElementById('list').addEventListener('click', function(event) {
if (event.target.classList.contains('item')) {
event.target.style.backgroundColor = 'yellow';
}
});注意事项
- 事件冒泡可能被
stopPropagation()中断，需确保不阻止冒泡。 - 复杂场景可通过
closest()方法匹配更灵活的选择器：if (event.target.closest('.item')) { /* 逻辑 */ }
