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')) { /* 逻辑 */ }