如何为没有JQuery动态创建的元素创建事件侦听器

Question

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

我只有一个问题：事件监听器，用于在Javascript中创建监听器后动态创建的元素。

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

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

这种方法运行正常：但我找不到我称之为＃34; Javascript Pure＆＃34;

的等价物

另一个，我发现的唯一一个，不适用于动态创建的元素：

[].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对象。

Answer 2

 x=document.getElementsByClassName('.class_ElementTrigger');

  x.addEventListener('onclick',function(){
          //your logic          

   });