event.addEventListener() 在 forEach 循环中

Question

function initNumberElement(){
let idReference = ['zero','one','two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
let numberElementReference = [];
let temp = '0';

for (const key of idReference) {
    numberElementReference.push(document.getElementById(key));
    for (let i = 0; i < numberElementReference.length; i++) {
        numberElementReference[i].addEventListener('click', () => {
            temp = temp + String(i);
            changeVisualOut(temp)
        })
    }
}
return numberElementReference;

}

从 Dom 检索到元素后，我尝试使用 forEach () 为每个元素动态插入一个 addEventListener ()，但每次我单击一个元素时，都会触发多次事件。为什么？

即使使用 for 循环，动态保持不变

Answer 1

你根本不需要第二个循环。在第一个循环中，您遍历 id 列表并将元素添加到 numberElementReference 数组中。然后，对于 numberElementReference 数组中的所有元素，您要添加点击处理程序，这就是为什么每个元素都有多个侦听器（因为对于外循环中的每个项目，您要为整个 numberElementReference 数组）

你可以只使用一个循环：

function initNumberElement() {
  let idReference = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
  let numberElementReference = [];
  let temp = "0";

  for (let i = 0; i < idReference.length; i++) {
    const id = idReference[i];
    const element = document.getElementById(id);

    numberElementReference.push(element);

    element.addEventListener("click", () => {
      temp = temp + String(i);
      changeVisualOut(temp);
    });

  }

  return numberElementReference;

}

event.addEventListener() 在 forEach 循环中

event.addEventListener() in forEach loop

javascript

foreach

events

dom

loops