js 实现 delegate
在 JavaScript 中实现事件委托（delegate）是一种高效的事件处理技术，它通过将事件监听器绑定到父元素而非子元素，利用事件冒泡机制动态处理子元素的事件。以下是实现事件委托的几种方法：
使用 addEventListener 和事件目标检查
通过事件冒泡捕获子元素事件，检查事件目标（event.target）是否符合条件：
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target.matches('.child')) {
console.log('Child element clicked');
}
});动态处理嵌套子元素
若子元素可能包含更深层嵌套，使用 closest 方法向上查找匹配元素：
document.getElementById('parent').addEventListener('click', function(event) {
const childElement = event.target.closest('.child');
if (childElement) {
console.log('Child or nested child clicked', childElement);
}
});封装通用事件委托函数
封装一个可复用的函数，支持选择器匹配和回调执行：
function delegate(parentSelector, childSelector, eventType, handler) {
document.querySelector(parentSelector).addEventListener(eventType, function(e) {
if (e.target.matches(childSelector)) {
handler(e);
}
});
}
// 使用示例
delegate('#parent', '.child', 'click', (e) => {
console.log('Delegated event triggered', e.target);
});性能优化建议
- 尽量选择最近的父元素作为委托容器，减少事件冒泡层级。
- 避免在大型文档中使用全局委托（如
document），缩小监听范围。 - 对于频繁触发的事件（如
mousemove），需谨慎使用委托。
兼容性处理
如需支持老旧浏览器，可添加 matches 的兼容性前缀：
Element.prototype.matches = Element.prototype.matches ||
Element.prototype.msMatchesSelector;事件委托能显著减少内存占用，尤其适用于动态添加或大量子元素的场景。
