Javascript 如何为数组（或节点列表）执行事件委派

我有生以来第一次尝试使用事件委托/切换语句，但是for循环遇到了问题。当它是“数组[i]”时，这不是一个问题。但是现在我正在删除for循环以使用事件委托并将其放入函数中，它不断给我错误，我不知道什么参数可以替换（并使代码再次工作）新函数中的数组[I]。任何帮助或解释都将不胜感激

//original code

const numbers = document.querySelectorAll(".number");

for (let i = 0; i < numbers.length; i++) {
  numbers[i].addEventListener("click", function () {
    if (display.value.length < 13) {
      return;
    }
    if (display.value == "0" && numbers[i] != dot) {
      display.value = numbers[i].innerText;
      calculation = display.value;
    } else {
      if (numbers[i] == dot && display.value.includes(".")) {
        return;
      } else if (numbers[i] == dot && display.value == "") {
        return;
      } else {
        display.value += numbers[i].innerText;
        calculation = display.value;
      }
    }

    buttonEffect(numbers[i], "number-active");
  });
}

---

将作为单击目标的元素传递到

numberClick

，并在以前使用

numbers[i]

的位置使用它。看起来你已经在做第二部分了，你甚至为它声明了一个参数，你只需要传入元素：

numberClick(e.target);

请注意，如果您的

.number

元素有子元素，

target

可能是这些子元素之一，而不是

.number

。要处理这个问题，您可以使用DOM相对较新的方法，可能与

contains

结合使用，以确保它与

周围的内容不匹配

document.querySelector(".wrapper").addEventListener("click", (e) => {
    const number = e.target.closest(".number");
    if (number && this.contains(number) && number.dataset.key) {
        numberClick(number);
    }
});

如果您需要支持过时的浏览器，或者只需自己进行循环，可以使用polyfills：

document.querySelector(".wrapper").addEventListener("click", (e) => {
    let number = e.target;
    while (number && !number.matches(".number")) {
        if (this === number) {
            return; // Reached the wrapper without finding it
        }
        number = number.parentElement;
    }
    if (number && number.dataset.key) {
        numberClick(number);
    }
});

真不敢相信解决办法会那么简单。。。你给了我第一行密码。非常感谢你！！！！你救了我。
document.querySelector(".wrapper").addEventListener("click", (e) => {
    let number = e.target;
    while (number && !number.matches(".number")) {
        if (this === number) {
            return; // Reached the wrapper without finding it
        }
        number = number.parentElement;
    }
    if (number && number.dataset.key) {
        numberClick(number);
    }
});