javascript - 如何使用事件监听器插入新元素？

Question

目标是通过单击一个元素来触发一个事件，这将创建一个具有相同标签、类和事件侦听器的新元素，以创建另一个相同类型的元素......

const btn = document.querySelectorAll("button");

btn.forEach((b) =>
  b.addEventListener("click", function () {
    console.log("Boom!");
    b.insertAdjacentHTML("afterend", "<button class='button'>Boom</button>");
  })
);

<button class="button">Boom</button>

然而，当一个新元素被动态创建时，尽管应用了 .querySelectorAll 和 .forEach，它仍然缺少事件监听器。那么如何使用事件监听器动态创建元素呢？

Answer 1

我想到的一个解决方案是为所有按钮和动态按钮添加一个类（比如 myBtnEvent），并在文档级别监听点击事件。例如：繁荣

document.addEventListener('click', function(event) {
    if(event.target && event.target.classList.contains('myBtnEvent')){
          //do your stuff
     }
 });

Answer 2

您可以为此使用cloneNode。

function duplicate(id) {
  const el = document.getElementById(id)
  const duplicateEl = el.cloneNode(true)
  const random = parseInt((Math.random() * 10000));
  duplicateEl.id = id + "_" + random; // unique ID
  el.insertAdjacentElement("afterend", duplicateEl)
}

<button id="boom" class="button" onclick="duplicate(this.id)">Boom</button>