js实现事件委托
事件委托的概念
事件委托是一种利用事件冒泡机制的技术，通过将事件监听器绑定到父元素而非每个子元素上，统一管理子元素的事件响应。这种方式能减少内存占用并提高性能，尤其适用于动态添加的子元素。
实现事件委托的步骤
绑定父元素监听器
选择目标子元素的共同父元素，为其添加事件监听器。例如，监听<ul>元素来处理其下所有<li>的点击事件：
document.getElementById('parent').addEventListener('click', function(event) {
// 事件处理逻辑
});识别目标子元素
通过event.target获取实际触发事件的子元素，并验证其是否为目标元素。例如，筛选li标签：
if (event.target.tagName === 'LI') {
// 执行针对li的操作
}动态子元素支持
事件委托天然支持动态添加的子元素，无需重新绑定监听器。新增的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';
}
});性能优化场景
- 大量子元素：减少数百个独立监听器的内存消耗。
- 频繁动态更新：避免每次增删子元素时重复绑定/解绑事件。
注意事项
- 使用
event.currentTarget获取绑定监听器的父元素，event.target获取实际触发元素。 - 可通过
data-*属性或classList进一步过滤目标子元素。
通过事件委托，代码更简洁且易于维护，尤其适合复杂交互场景。
