Question

工作代码带来错误 addEventListener 不是一个函数

2016-11-02

1712

javascript google-chrome

我使用这段代码：

for (el in document.getElementsByClassName("close-sidenav"))
document.getElementsByClassName("close-sidenav")[el].addEventListener("click", closeSidenav);

它运行完美，它在元素上添加了点击事件，但 Chrome 一直告诉我：

未捕获的 TypeError：document.getElementsByClassName(...)[el].addEventListener 不是函数(…)

如何防止 Chrome 在工作代码上给我报错？

Answer 1

document.getElementsByClassName() 返回一个 HTMLCollection 对象。

该对象不仅具有数字属性，还具有将包含在 for/in 枚举中的其他属性。

因此，不要将 for/in 与 document.getElementsByClassName() 返回的 HTMLCollection 一起使用，因为它将返回该数据结构的其他属性，而这些属性不是您想要的元素。

相反，使用常规的 for 循环。

var list = document.getElementsByClassName("close-sidenav");
for (var i = 0; i < list.length; i++) {
    list[i].addEventListener("click", closeSidenav);
}

请参阅此其他答案 HTMLCollection 元素的 For 循环了解更多详细信息，包括在 ES6 中使用 Array.from() 执行此迭代的酷方法或使用 for/of 循环的方法。

Answer 2

除了尝试上述方法，您还可以使用以下代码片段完成相同的工作。

// Initially we grab once here the elements
var elements = document.getElementsByClassName("close-sidenav"); 
if(elements){
    // We found elements with the specified class.
    for (var i=0; i<elements.length; i++){
        // Then we attach here an event listener to them.
        elements[i].addEventListener("click", closeSidenav);
    }
}

在上面的代码片段中，请注意我们使用了简单的 for 结构，而不是 for...in 结构。后者与 for 相比有所不同。它循环遍历 in 之后的对象的键。