js实现委派

事件委派的概念

事件委派是一种利用事件冒泡机制的技术，通过将事件监听器绑定到父元素而非每个子元素，来统一处理子元素的事件。这种方式能减少内存消耗，提高性能，尤其适合动态添加的子元素。

基本实现方法

1. 绑定父元素监听器
   将事件监听器绑定到父元素，指定需要处理的事件类型（如click）：

   document.getElementById('parent').addEventListener('click', function(event) {
     // 事件处理逻辑
   });

2. 识别目标子元素
   通过event.target获取实际触发事件的子元素，结合条件判断过滤无关元素：

   if (event.target.classList.contains('child-class')) {
     // 处理目标子元素的事件
   }

动态元素支持

事件委派天然支持动态添加的子元素，无需重新绑定监听器。新添加的子元素触发事件时，仍会冒泡到父元素被捕获。

性能优化建议

• 减少条件判断复杂度
  使用data-*属性或特定类名快速识别目标元素，避免多层嵌套判断。

• 避免过度委派
  仅在需要处理多个子元素或动态内容时使用委派，简单场景直接绑定更高效。

  

示例代码

// 父元素绑定点击事件委派
document.querySelector('#list').addEventListener('click', (event) => {
  // 检查点击的是否为列表项（LI元素）
  if (event.target.tagName === 'LI') {
    console.log('点击的项目内容:', event.target.textContent);
  }
});

注意事项

• 某些事件（如focus、blur）不冒泡，需使用focusin/focusout替代。
• 若子元素内有嵌套结构，需通过event.target.closest(selector)向上查找匹配元素。
• 阻止冒泡（event.stopPropagation()）会破坏委派机制，谨慎使用。