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

【问题标题】：How do I add an event listener to each element in an html collection?如何为 html 集合中的每个元素添加事件侦听器？
【发布时间】：2018-07-25 01:26:41
【问题描述】：

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 岁吗？

【问题讨论】：

i <= inputs.length 错字。此外，如果可以，请改用事件委托
@CertainPerformance - 可能不是错字，更多的是缺乏知识
你能解释一下错字是什么吗？这是知识的缺乏。我在飞翔

标签： javascript html events nodelist htmlcollection

【解决方案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);
}

【讨论】：