纯javascript等价于带有选择器的$(document）.on(event）

Plain javascript equivalent of $(document).on(event) with selector

本文关键字：document on event 等价于 javascript 选择器      更新时间：2023-09-26

我正在尝试将jQuery事件处理程序转换为纯javascript。页面上加载了一个特定的选择器，因此设计该选择器时只有一个事件目标文档：

$(document).on("click", selectorString, function(event) {
 // do stuff
});

其中，selector是作为字符串".one, .two, .three"的选择器列表。

我很难在没有jQuery的情况下复制它：

document.addEventListener("click", function(event){
    if (elementHasClass(event.target, selectorString) {
        // do stuff
    }
});

但这并没有达到所需的行为，因为监听器只在document元素上，而不是在文档中的选定元素上。有人能帮忙吗？

您的问题似乎是它不适用于嵌套元素。

例如，如果您单击一个嵌套的span元素，该元素具有指定类的父级，则它不起作用，因为您只是在检查span元素（即event.target）是否具有该类。

为了解决这个问题，您可以委托事件，并检查event.target元素的父元素中是否有指定的类：

此处示例

document.addEventListener("click", function (e) {
    var target = e.target;
    while (target && target.parentNode !== document) {
        target = target.parentNode;
        if (!target) { return; } // If element doesn't exist
        if (target.classList.contains('target')){
            // do stuff
            console.log(e.target);
        }
    }
});
相关文章：