如何將事件監聽器添加到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：無法讀取未定義的屬性'addEventListener'

如果我可以將每個人都登錄到控制台，該怎么定義呢？ 有人可以解釋一下我5歲嗎？

Answer 1

就像@CertainPerformance所說的那樣，您的錯誤是讓i <= inputs.length而不是i < inputs.length 。

區別在於，在第一種情況下，您將超出數組的邊界。

例如，如果您有一個由5個元素組成的數組（記住數組是從0開始的）：

0
1
2
3
4

當您使用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); }