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

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

请参阅下面的示例。

const addTestElements = () => {
    var el = document.createElement("p"),
        node = document.createTextNode("Test element, class 'my-element'");
    el.classList.add("my-element");
    el.appendChild(node);
    document.body.appendChild(el);
    el = document.createElement("p");
    node = document.createTextNode("Test element, class 'test'");
    el.classList.add("test");
    el.appendChild(node);
    document.body.appendChild(el);
}
document.getElementById("add").addEventListener("click", addTestElements);
document.body.addEventListener("click", function (e) {
    if (e.target &&
        e.target.classList.contains("my-element")) {
        console.clear();
        console.log("An element with class 'my-element' was clicked.")
        e.target.style.fontWeight = e.target.style.fontWeight === "bold" ? "normal" : "bold";
    }
});

<button id="add">Add element</button>