仅使用 Javascript 将事件监听器添加到不存在的对象

我搜索了整个 stackoverflow，但没有针对这个问题得到任何好的结果。如果我错了，请纠正我。

我想向 DOM 中存在或不存在的对象添加EventListener。

在Jquery中我们可以简单地执行以下代码：

$('document').on('click', '.my-button', function () {
    alert("work!!!");
});

但我怎样才能只使用Javascript来实现呢？下面是我的源代码。但是页面加载后，所有新添加的对象都没有附加点击事件。

var Button = document.getElementsByClassName("my-button");
for(i=0;i<Button.length;i++){
    document.getElementsByClassName("my-button")[i].addEventListener("click",function(){
        alert("Work!!!!");
    });
}

感谢任何建议。

jQuery 不会将事件侦听器添加到每个 div，而是将其附加到父级。

您可以做的是将事件附加到父级，然后在事件处理程序中，看到它的目标是按钮之一，然后运行您的函数

HTML

<div id="parent">
     <div class="my-button">one</div>
     <div class="my-button">two</div>
     <div class="my-button">three</div>
</div>

JS

document.getElementById("parent").addEventListener("click", function(event) {
     if ( event.target.className === 'my-button') {
          //Do your magic
     }
});

这样，您添加的每个按钮都将运行您的函数。 我不知道事件目标是否具有 className 属性，但我认为根据 event.target 对象获取元素相当简单。 请记住，旧版 IE 没有 addEventListener 函数。检查这里EventTarget.addEventListener - Web API 接口| MDN