Question

我有这个代码，例如：

<html>
<input class="basketQuantity" type=number>Basket item 1</input>
<input class="basketQuantity" type=number>Basket item 2</input>
</html>

<script>
quantityInputs = document.querySelectorAll(".basketQuantity");
for(var i in quantityInputs){
    quantityInputs[i].addEventListener('change', function(){
        console.log(quantityInputs[i]);
    });
}
</script>

当我运行它时，我收到错误消息：

TypeError: quantityInputs[i].addEventListener is not a function

有人能告诉我为什么会这样吗？

Answer 1

quantityInputs = document.querySelectorAll(".basketQuantity");

首先quantityInputs是NodeList object。所以

for(var i in quantityInputs){
    console.log(i);
}

将返回所有可枚举属性 - 来自quantityInputs对象及其原型链，而不仅仅是它自己的（只有quantityInputs可枚举属性）。 for .. in还会从原型链返回length字段和item可枚举属性，此属性不是DOM节点，因此不具备addEventListener方法。

您必须使用Object.keys：

var nodeArray = [].slice.call(document.querySelectorAll(".basketQuantity"));

Object.keys(nodeArray).forEach(function (node) {
    // node.addEventListener
});

或

或for .. in与hasOwnProperty检查：

quantityInputs = document.querySelectorAll(".basketQuantity"); for(var i in quantityInputs){ if (quantityInputs.hasOwnProperty(i)) { // quantityInputs[i].addEventListener } }

或

将来（ES6）你可以使用for .. of循环：

var quantityInputs = document.querySelectorAll("basketQuantity"); for (var node of quantityInputs) { console.log(node.addEventListener); }

注意（感谢@Teemu）：

您的处理程序中出现i错误：

quantityInputs[i].addEventListener('change', function(){ console.log(quantityInputs[i]);// return value of quantityInputs last i });

最好使用this addEventListener目标：

quantityInputs[i].addEventListener('change', function(){ console.log(this); });

Answer 2

您正在迭代nodeList：

 quantityInputs = document.querySelectorAll(".basketQuantity");
    [].forEach.call(quantityInputs, function (e) {
        e.addEventListener('click', function () {
            console.log("hello")
        }, false)
    })

Answer 3

JavaScript for / in语句循环遍历对象的属性，因此var i有时会接收数组quantityInputs的属性，如长度。

只需将您的循环更改为常规，例如for (i = 0; i < quantityInputs.length; i++) {...，它应该有效：

quantityInputs = document.querySelectorAll(".basketQuantity");
for (i = 0; i < quantityInputs.length; i++) {
    quantityInputs[i].addEventListener('change', function(){
        console.log('foo');
    });
}

请点击此处了解详情：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

事件监听器给出错误

3 个答案: