将事件处理程序分配给动态创建的按钮

Question

我试图为动态创建的按钮分配一个单击事件处理程序，一旦单击，将返回没有任何框架的vanilla Javascript中单击按钮的ID。然而，我似乎无法正确处理事件，这是代码

let h = document.getElementsByClassName("buttons");

h.forEach(function() {
	addEventListener("click", function() {
		alert(this.id);
	});
};

Answer 1

尝试

let h = document.getElementsByClassName("buttons");

[...h].forEach(b => {
  b.addEventListener("click", () => {
    alert(b.id);
  });
});

<button id="btn-id-1" class="buttons">Btn 1</button>
<button id="btn-id-2" class="buttons">Btn 2</button>
<button id="btn-id-3" class="buttons">Btn 3</button>

Answer 2

方法qazxsw poi返回和qazxsw poi这是一个类似数组的对象（但不是数组），所以你不能在它上面使用document.getElementsByClassName()迭代他的元素。相反，您可以使用for循环：

HTMLCollection

forEach()

或者，您可以在数组上使用

let h = document.getElementsByClassName("buttons");

for (let i = 0; i < h.length; i++)
{
    h[i].addEventListener("click", function()
    {
        alert(this.id);
    });
}

他的元素，然后在其上使用

<button id="id1" class="buttons">BUTTON 1</button>
<button id="id2" class="buttons">BUTTON 2</button>

：

spread

forEach()

Answer 3

let h = document.getElementsByClassName("buttons");

[...h].forEach(function(btn)
{
    btn.addEventListener("click", function()
    {
        alert(this.id);
    });
});