使用 vanilla JavaScript 将事件绑定到动态创建的 HTML 元素 [无 jquery]

Question

我需要将事件附加到动态创建的元素。借助 jQuery，我可以使用以下代码对此进行存档：

$("body").on("click", ".my-element", function() {});

如果我添加一个新的.my-element，它会自动附加事件。

我没有通过 来创建元素document.createElement("div");，但我使用pjax来重新加载页面的某些部分，因此主 JavaScript 文件仅加载一次，因此需要动态附加事件。

我如何使用普通 JavaScript 来实现这一点？

Answer 1

jQuery 示例的纯 JavaScript 版本

$("body").on("click", ".my-element", function() {});

将会：

document.body.addEventListener("click", function (e) {
    if (e.target &&
        e.target.classList.contains("my-element")) {
        // handle event here
    }
});

请参阅下面的示例。

$("body").on("click", ".my-element", function() {});

document.body.addEventListener("click", function (e) {
    if (e.target &&
        e.target.classList.contains("my-element")) {
        // handle event here
    }
});