带有选择器的 $(document).on(event) 的普通 javascript 等价物答案

【问题标题】：Plain javascript equivalent of $(document).on(event) with selector带有选择器的 $(document).on(event) 的普通 javascript 等价物
【发布时间】：2015-11-21 00:51:22
【问题描述】：

我正在尝试将 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 元素上，而不是文档中内的选定元素。有人可以帮忙吗？

【问题讨论】：

那是因为您现在需要创建自己的事件委托。 davidwalsh.name/event-delegate

标签： javascript jquery

【解决方案1】：

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

例如，如果您单击嵌套的span 元素，该元素的父级具有指定的类，那么它不起作用，因为您只是检查span 元素（即event.target ) 有课。

要解决此问题，您基本上可以委托事件并检查event.target 元素的任何父元素是否具有指定的类：

Example Here

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);
        }
    }
});

【讨论】：