时间戳

首页 > 解决方案 > 如何在所有具有特定类的 dom 元素上添加 EventListener？

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

问题描述

我的 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”。

标签： javascriptjquerytypescriptonclickaddeventlistener

解决方案

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

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

推荐阅读