事件委托函数通过事件冒泡机制将监听绑定在父容器，利用closest()精准匹配目标元素并执行回调。函数接收容器、事件类型、选择器、回调及可选配置，支持捕获、一次性执行和运行时过滤，返回移除监听方法。
事件委托的核心是利用事件冒泡，把事件监听绑定在父元素上，再根据 event.target 判断是否匹配目标选择器。写一个通用委托函数，关键在于：正确监听、精准匹配、安全执行回调，并支持动态添加的元素。
基础结构：接收容器、选择器、事件类型和回调
通用函数至少要接收四个参数：委托容器（DOM 元素）、事件类型（如 "click"）、CSS 选择器（如 ".btn"）、以及触发时执行的回调函数。回调中应能访问原生事件对象和匹配到的真实目标元素。
- 用
Element.matches()判断event.target是否符合选择器（兼容性好，现代浏览器都支持） - 注意向上查找时需防止越界（比如目标是容器自身或超出容器），通常只检查从
target到容器之间的元素 - 推荐使用
closest()方法直接找最近匹配祖先（包括自身），更简洁可靠
处理事件代理逻辑：从 target 向上找匹配元素
不能只判断 event.target 是否匹配——因为点击可能发生在子元素（比如按钮里的图标），真正要委托的是“被选中的目标元素”，而不是最深的文本节点。所以要用 event.target.closest(selector) 获取符合条件的最近祖先。
- 如果
closest()返回非 null，则说明事件源在委托范围内，执行回调 - 回调函数可接收三个参数：
event、matchedEl（匹配到的元素）、delegatedEl（委托容器） - 避免在回调里重复绑定或修改 DOM，保持轻量
支持选项配置：捕获、一次性、事件过滤
进阶版本可以加一个 options 参数，控制行为：
-
capture: true—— 在捕获阶段监听（较少用，但某些场景需要） -
once: true—— 执行一次后自动移除监听（适合初始化类操作） -
filter: (el) => el.dataset.action === "submit"—— 额外运行时条件过滤
完整可复用的委托函数示例
下面是一个轻量、无依赖、支持常见需求的实现：
function delegate(container, eventType, selector, handler, options = {}) {
const { capture = false, once = false, filter } = options;
const listener = (e) => {
const matched = e.target.closest(selector);
if (!matched || matched === container || !container.contains(matched)) return;
if (filter && !filter(matched)) return;
handler(e, matched, container);
};
container.addEventListener(eventType, listener, { capture, once });
// 返回移除方法，便于手动清理
return () => container.removeEventListener(eventType, listener, { capture });
}
用法示例：
// 给 #list 下所有 .item 点击委托
const off = delegate(document.getElementById('list'), 'click', '.item', (e, el) => {
console.log('点击了', el.textContent);
});
// 后续可调用 off() 移除监听
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
