使用 document.addEventListener 结合 Element.closest() 方法，可高效替代 jQuery 的事件委托语法，完美支持动态插入的元素，且无需依赖库。
使用 `document.addeventlistener` 结合 `element.closest()` 方法，可高效替代 jquery 的事件委托语法，完美支持动态插入的元素，且无需依赖库。
在原生 JavaScript 中模拟 jQuery 的 $(document).on('click', selector, handler) 行为，关键在于事件委托（event delegation）：将事件监听器绑定在高层容器（如 document），再通过 event.target 向上查找是否匹配目标选择器。由于 .closest() 会沿 DOM 树向上遍历并测试选择器，它天然适配动态加载的内容（如 AJAX 插入的按钮），无需重新绑定事件。
以下是推荐实现：
const clickClasses = '.btn1.btnh, .btn-consent-accepted, .btn-consent-save-accepted, .btn-consent-save-reject, .btn-consent-save-settings';
document.addEventListener('click', (event) => {
const matchedElement = event.target.closest(clickClasses);
if (!matchedElement) return;
// ✅ 此处执行业务逻辑，matchedElement 即被点击的目标元素
console.log('Clicked element:', matchedElement);
// 例如：触发同意逻辑、保存设置、关闭弹窗等
});✅ 优势说明：
-
closest()支持复杂选择器（含复合类名如.btn1.btnh、多组逗号分隔规则），与 jQuery 的行为高度一致； - 自动兼容动态 DOM —— 只要元素存在且符合选择器，无论何时插入，均能捕获点击；
- 无第三方依赖，轻量、标准、现代（兼容性良好，IE11+ 支持，必要时可添加 polyfill）。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 避免在
closest()中使用伪类（如:hover、:nth-child）或不可见元素选择器（如:disabled），因其不适用于closest()； - 若需区分具体匹配的类名，可进一步检查
matchedElement.className或使用matches()进行精细化判断； - 为提升性能，可将
clickClasses字符串提前编译为正则（非必需），但对常规场景无明显收益，优先保持可读性。
该方案简洁、健壮、符合现代 Web 开发实践，是 jQuery 事件委托向原生迁移的理想范例。
