如何为 html 集合中的每个元素添加事件侦听器？

Question

function eventAdded(i) {
  console.log(inputs[i]);
}
var inputs = document.querySelectorAll('.js-capture__input input');
for (i = 0; i <= inputs.length; i++) {
  console.log(inputs[i]);
  inputs[i].addEventListener('change', eventAdded);
}

我设法将每个 inputs[i] 记录到控制台。 inputs[i] 存在。但我越来越未捕获的类型错误：无法读取未定义的属性 'addEventListener'

如果我可以将每个记录都记录到控制台，这怎么没有定义？有人可以像我 5 岁一样解释一下吗？

Answer 1

如@CertainPerformance 所说，您的错误是 i <= inputs.length 而不是 i < inputs.length。

不同之处在于，在第一种情况下，您将超出数组的边界。

例如，如果您有一个包含 5 个元素的数组（记住数组是从 0 开始的）：

当您使用 i <= inputs.length 检查时，情况是这样的：

0 <= 5: true
1 <= 5: true
2 <= 5: true
3 <= 5: true
4 <= 5: true
5 <= 5: true
6 <= 5: false

所以不是迭代 5 次，而是迭代 6 次。最后一个 (i=5) 不在数组边界内（其上限为 4）。

function eventAdded(i) {
  console.log(inputs[i]);
}
var inputs = document.querySelectorAll('.js-capture__input input');
for (var i = 0; i < inputs.length; i++) {
  console.log(inputs[i]);
  inputs[i].addEventListener('change', eventAdded);
}

如何为 html 集合中的每个元素添加事件侦听器？

How do I add an event listener to each element in an html collection?

javascript

html

events

nodelist

htmlcollection