如果我的事件添加了 for 循环，我该如何使用 removeClickEvents？ [javascript]

Question

我正在创建一个井字游戏，我在其中添加事件侦听器以检查是否单击了某个框。这是我用来向页面上的元素添加点击事件的函数：

function addClickEvents(){
  for (let i = 0; i < images.length; i++) {
    boxes[i].addEventListener(
      "click",
      function () {
        addEvents(i);
      },
      { once: true }
    );
  }
}

function addEvents(x) {
  document.images[x].style.display = "block";
}

我想删除这些事件，这样我就不会在游戏重置后重叠它们。我在重置游戏的页面上有一个单独的按钮。无论如何要使用该按钮删除 eventListeners 吗？我使用了一个看起来像这样的函数，但它似乎不起作用：

function resetGame() {
  for (let reset = 0; reset < 9; reset++) {
    document.boxes[reset].removeEventListener("click", addEvents);
  }
}

我也尝试过将函数附加到变量并以这种方式添加它，但据我所知这不起作用，因为我需要将变量传递给函数。

Answer 1

您可以尝试向您的盒子元素添加一个通用 class，然后稍后在代码中使用它们来删除事件侦听器。

首先你要添加 class 比如：

function addClickEvents(){
  for (let i = 0; i < images.length; i++) {
    boxes[i].classList.add('boxes');// add class to the boxes
    boxes[i].addEventListener(
      "click",
      function () {
        addEvents(i);
      },
      { once: true }
    );
  }
}

然后你可以像这样写重置函数：

function resetGame() {
  document.querySelectorAll('.boxes').forEach((box)=>{
    box.outerHTML = box.outerHTML;// This will remove all event listeners
 })
}

更多信息请查看this answer

如果我的事件添加了 for 循环，我该如何使用 removeClickEvents？ [javascript]

How can I use removeClickEvents if my events are added with a for loop? [javascript]

javascript

loops

addeventlistener

removeeventlistener