javascript - 如何为 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]存在。但是我得到了 Uncaught TypeError: Cannot read property 'addEventListener' of undefined

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

Answer 1

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

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

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

0
1
2
3
4

当您检查 usingi <= 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);
}