javascript - 如何为不使用 JQuery 动态创建的元素创建事件监听器

Question

我正在尝试从我的网站中删除 JQuery:因为我在应用程序的一小部分中使用了它。

我只有一个问题:在 Javascript 创建监听器后动态创建的元素的事件监听器。

在 JQuery 中，我创建了如下监听器:

$(document).on('click', '.class_ElementTrigger', function() {    });

这个方法工作正常:但我没有找到我称之为“Javascript Pure”的等效方法

这是我发现的唯一一个，不适用于动态创建的元素:

[].forEach.call(document.querySelectorAll('.el'), function (el) {
    el.addEventListener('click', function() {

    }, false);
});

有人知道制作方法吗？谢谢!

Answer 1

与 jQuery 一样，将事件处理程序附加到静态容器。然后，您可以在事件处理函数中根据 e.target 检查类名、ID 等。

这是一个(非常)基本的示例:

document.onclick = function(e){
    if(e.target.classList.has('example')){
        alert('.class_ElementTrigger was clicked');   
    }
}

JSFiddle

请注意，我使用了 classList此处对象。