如何将监听多类动态元素点击的jQuery代码转为原生JavaScript？

你的jQuery代码核心是利用事件委托实现对多个选择器元素的点击监听，同时支持AJAX动态加载的元素。下面是对应的原生JavaScript实现：

// 定义需要监听的选择器，和原jQuery代码一致
const clickSelectors = '.btn1.btnh, .btn-consent-accepted, .btn-consent-save-accepted, .btn-consent-save-reject, .btn-consent-save-settings';

// 给document绑定点击事件（事件委托）
document.addEventListener('click', function(e) {
    // 找到事件路径中第一个匹配选择器的元素，兼容点击子元素的情况
    const matchedElement = e.target.closest(clickSelectors);
    
    if (matchedElement) {
        // 这里替换原代码中的//do something逻辑
        // 例如：
        console.log('点击了匹配元素:', matchedElement);
        // 如果需要阻止默认行为，可调用e.preventDefault()
        // e.preventDefault();
    }
});

关键说明： #

• 事件委托机制：将事件绑定到document这个顶级容器，确保动态添加的元素触发的点击事件能通过冒泡被捕获，这和jQuery的on()委托逻辑一致。
• closest()方法：从点击的目标元素（e.target）向上遍历DOM树，找到第一个匹配选择器的元素，完美复现jQuery委托中“点击元素或其子元素都能触发事件”的行为。如果只需要精确匹配点击的元素本身，可以改用e.target.matches(clickSelectors)。
• 兼容性：现代浏览器（Chrome、Firefox、Edge等）均原生支持closest()和matches()；若需兼容IE等旧浏览器，可添加对应的polyfill，但目前大部分场景无需额外处理。

内容的提问来源于stack exchange，提问作者NicoF