javascript - 命名函数并向其添加事件监听器会导致 "not defined"

Question

我还是 JavaScript 的新手，我遇到了以下问题。

我想命名/声明我的函数，然后使用它的名称作为监听器来轻松添加/删除点击事件。这样做的主要原因是我可以在某些情况发生时删除点击事件。

我要实现的目标简介:

function game() {
// 
}

我遇到的问题是当我添加这样的事件时:

for (let i = 0; i < cards.length; i++) {
    card = cards[i];
    card.addEventListener('click',  game);
}

named function 游戏出现错误:

i is not defined

但是，当我将函数作为匿名函数放在监听器参数中时，不会发生此错误。

for (let i = 0; i < cards.length; i++) {
    card = cards[i];
    card.addEventListener('click', function game() {
      //
}

全局声明 i 无效，也没有将 i 作为参数传递。

• 具有匿名函数的完整代码:Here
• 带有命名函数的完整代码(我想工作的):Here

Answer 1

要访问不同的i，您需要不同的闭包，因此您会得到不同的函数引用。您可以将它们直接存储在卡中，以便稍后将它们移除:

for (let i = 0; i < cards.length; i++) {
  const card = cards[i];
  card.addEventListener('click', card._click = function game() {
    //
  });
}

然后你可以稍后删除它:

card.removeEventListener("click", card._click);

---

如果你将 game 移到外面并为 i 添加一个柯里化(Currying)参数(可能更干净)，这同样有效:

const game = i => () => {
  // ...
 };

for (let i = 0; i < cards.length; i++) {
  const card = cards[i];
  card.addEventListener('click', card._click = game(i));
}