javascript - 如何在所有具有特定类的 dom 元素上添加 EventListener？

Question

我的 DOM 中有一些包含 class="foo"的跨度，并且所有跨度都是动态创建的。

使用 TypeScript，我想在创建它们后为其添加一个 onClick 事件。

我有这样的东西:

var foos = document.body.querySelectorAll(".foo");
foos.forEach(function (item) {            
    item.addEventListener("click", () => { 
        console.log(item); 
    });
});

但是我不能在 NodeListOf 上执行 forEach 操作。

foos = Array.from(foos) 不起作用，因为:类型“ArrayConstructor”上不存在“from”。

Answer 1

为此使用简单的 for 循环。您可以获取 foos 数组中每个索引的元素并为其分配单击事件。这是因为 querySelectorAll 返回一个 NodeList，它像数组一样索引，但不是数组，因此您无法调用它的数组方法，因为它不是真正的数组.

var foos = document.body.querySelectorAll(".foo"));
for(var i=0; i<foos.length; i++){
    foos[i].addEventListener("click", () => { 
        console.log(item); 
    });
});