js实现委派
事件委派的概念
事件委派是一种利用事件冒泡机制的技术，通过将事件监听器绑定到父元素而非每个子元素，来统一处理子元素的事件。这种方式能减少内存消耗，提高性能，尤其适合动态添加的子元素。
基本实现方法
-
绑定父元素监听器
将事件监听器绑定到父元素，指定需要处理的事件类型（如click）：
document.getElementById('parent').addEventListener('click', function(event) { // 事件处理逻辑 }); -
识别目标子元素
通过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()）会破坏委派机制，谨慎使用。
