Question

我试图将click事件处理程序分配给动态创建的按钮，这些按钮一旦被单击，将在没有任何框架的情况下以纯Javascript返回被单击的按钮的ID。但是我似乎无法正确处理事件，这是代码

let h = document.getElementsByClassName("buttons");

h.forEach(function() {
	addEventListener("click", function() {
		alert(this.id);
	});
};

Answer 1

方法document.getElementsByClassName()返回并且HTMLCollection是一个类似数组的对象（但不是一个数组），因此您不能在上面使用forEach()遍历他的元素。相反，您可以使用for循环：

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()：

let h = document.getElementsByClassName("buttons");

[...h].forEach(function(btn)
{
    btn.addEventListener("click", function()
    {
        alert(this.id);
    });
});

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

Answer 2

尝试

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 3

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

h.forEach(function(element) {
    element.addEventListener("click", function() {
        alert("Hello");
    });
};

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

3 个答案: