Javascript JS-如何在不重新加载网页的情况下删除活动eventListener

我有一个启动eventListener的playGame（）函数。每次启动新游戏时，playGame（）函数似乎会创建一个额外的eventListener。如何删除活动的eventListener，以便每次玩游戏时都不添加新的eventListener

我已尝试使用此处概述的removeEventListener-。 我还研究了堆栈溢出的类似问题（如），但解决方案不适用

下面是函数的布局方式。在加载其余游戏脚本之前，我尝试删除旧的eventListener

函数游戏（）{
console.log（“新游戏”）；
//应该从上一个游戏中删除事件侦听器
removeEventListener（'keyup'，function（）{userInput（activeStringObj，event.key）；}）；
loadStartOutput（）；
字选择器（activeStringObj）；
addLetterDivs（activeStringObj）；
addHint（activeStringObj）；
addEventListener（'keyup'，function（）{userInput（activeStringObj，event.key）；}）；
}

我正在记录记录用户按键的数组，很明显，多个EventListener正在记录输入

new game (typed 'a' 's')

game.js:98 ["a"]

game.js:98 (2) ["a", "s"]

new game (typed 'd' 'f')

game.js:98 (3) ["a", "s", "d"]

game.js:98 (4) ["a", "s", "d", "d"]

game.js:98 (5) ["a", "s", "d", "d", "f"]

game.js:98 (6) ["a", "s", "d", "d", "f", "f"]

new game (typed 'h' 'j')

game.js:98 (7) ["a", "s", "d", "d", "f", "f", "h"]

game.js:98 (8) ["a", "s", "d", "d", "f", "f", "h", "h"]

game.js:98 (9) ["a", "s", "d", "d", "f", "f", "h", "h", "h"]

game.js:98 (10) ["a", "s", "d", "d", "f", "f", "h", "h", "h", "j"]

game.js:98 (11) ["a", "s", "d", "d", "f", "f", "h", "h", "h", "j", "j"]

game.js:98 (12) ["a", "s", "d", "d", "f", "f", "h", "h", "h", "j", "j", "j"]

---

我希望每次按下一个键时只向数组中添加一个字母。

您必须传递相同的函数才能通过指针删除函数体，函数体是相同的，但它们不是相同的对象，它是指向具有相同体的两个不同函数对象的两个单独指针

---

或者添加一次事件侦听器，并将当前游戏对象作为参数传递给处理程序

您必须传递相同的函数才能通过指针移除函数体，函数体是相同的，但它们不是相同的对象，它是指向具有相同体的两个不同函数对象的两个单独指针

---

或者添加事件侦听器一次，并将当前游戏对象作为参数传递给处理程序当添加和删除事件侦听器时，处理程序函数（包括函数签名）应相同。在代码中，您已经编写了两次相同的函数定义！这意味着相同的函数声明两次。它的功能不同。相反，请尝试以下方法：

function takeAction(event) {
    userInput(activeStringObj, event.key)
}

function playGame() {
    console.log('new game');
    // should remove event listener from previous game
    document.removeEventListener('keyup', takeAction);

    loadStartOutput();
    wordPicker(activeStringObj);
    addLetterDivs(activeStringObj); 
    addHint(activeStringObj);

    document.addEventListener('keyup', takeAction);
}

---

这应该可以为您完成这项工作。

添加和删除事件侦听器时，处理程序函数（包括函数签名）应该是相同的。在代码中，您已经编写了两次相同的函数定义！这意味着相同的函数声明两次。它的功能不同。相反，请尝试以下方法：

function takeAction(event) {
    userInput(activeStringObj, event.key)
}

function playGame() {
    console.log('new game');
    // should remove event listener from previous game
    document.removeEventListener('keyup', takeAction);

    loadStartOutput();
    wordPicker(activeStringObj);
    addLetterDivs(activeStringObj); 
    addHint(activeStringObj);

    document.addEventListener('keyup', takeAction);
}

---

这应该可以为您完成这项工作。

是否可以不删除eventListener，而是启动两次？这是一个很好的考虑。然而，在页面刷新后游戏开始时，似乎只添加了一个。之后，每次重新启动游戏时，似乎只有一个额外的侦听器添加到数组中。是否有可能不删除eventListener，而是启动两次？这是一个很好的考虑。然而，在页面刷新后游戏开始时，似乎只添加了一个。之后，每次重新启动游戏时，似乎只有一个额外的侦听器添加到数组中。