有没有办法将事件监听器添加到类中？

【问题标题】：Is there any way to add an Event Listener to a class?有没有办法将事件监听器添加到类中？
【发布时间】：2019-06-26 00:53:15
【问题描述】：

所以我正在制作一个网络托管游戏，并且我正在尝试将一个事件添加到一个类中。

我在网上找不到一些有用的信息，我尝试使用

document.getElementsByClassName("class").addEventListener("click", function(){…});

我希望它测试是否单击了类中的某个项目，但它一直在犯这样的错误 - BattleMode.js:4 Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function 在 BattleMode.js:4;如果我尝试做任何其他事情，它不会感知具有某些属性的 div。

【问题讨论】：

“一个类”并不是你的代码所假定的那样存在的东西。该方法返回元素的 list，您必须单独处理它们。或者，您可以通过 document 对象上的事件处理程序使用事件委托。

标签： javascript html

【解决方案1】：

是的。请记住 getElementsByClassName() 是复数 - 元素s：

var elements = document.getElementsByClassName("class");

for (var i=0; i<elements.length; i++) {
    elements[i].addEventListener("click", function(){…});
}

请注意，getElementsByClassName() 不返回数组。相反，它返回一个 NodeList，它是一个类似数组的对象。因此，.map()、.forEach() 等常用的数组方法不可用。 NodeList 确实有一个 .length 属性，因此您可以对其进行迭代。

但是，您可以使用 Array.from 或 slice() 将它们转换为数组：

Array.from(document.getElementsByClassName("class"))
    .forEach(function(element){
        element.addEventListener("click", function(){…});
    });

【讨论】：