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

Question

我有一个启动 eventListener 的 playGame() 函数。每次开始新游戏时，playGame() 函数似乎都会创建一个额外的 eventListener。我怎样才能删除活动的 eventListener 以便每次玩游戏时都不会添加新的。

我已尝试使用此处概述的 removeEventListener - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener。我也看过类似的堆栈溢出问题（比如），但那里的解决方案不适用。

功能布局如下。我尝试在加载其余游戏脚本之前删除旧的 eventListener。

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

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

    document.addEventListener('keyup', function() {userInput(activeStringObj, event.key);});
}

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

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"]

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

Answer 1

你必须通过指针传递相同的函数来删除，函数主体是相同的但它们不是同一个对象，它是指向具有相同主体的 2 个不同函数对象的 2 个单独的指针。

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

Answer 2

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

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);
}

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

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

JS - How to remove an active eventListener without reloading the web page

javascript

addeventlistener

removeeventlistener