移除事件监听器 javascript

Question

我目前正在使用 javascript 做一个简单的石头、纸、剪刀游戏，但是 removeEventListener() 在我的代码中似乎不起作用。 我知道我使用了一个循环将事件侦听器应用到按钮，所以我会找出循环来删除它们。

现在，我不明白为什么我的代码不会删除单击按钮上的事件侦听器：

let btns = document.querySelectorAll('button');

btns.forEach(function(item) {

    item.addEventListener('click', function(event) {
        results.textContent = '';
        playRound(event.target.className, getComputerChoice());
        
        if (playerCount == 5) {
            item.removeEventListener('click', event);
            winner.textContent = `YOU WON 5 GAMES!`;

        }else if (cpuCount == 5) {
            item.removeEventListener('click', event);
            winner.textContent = `YOU LOSE! CPU WINS 5`;
        }
    });
});

Answer 1

removeEventListener采用的第二个参数是addEventListner回调 function，所以我建议您将addEventListner回调分离到一个名为 function 并在addEventListner和removeEventListner中使用

let btns = document.querySelectorAll('button');

function onClickHandler(event) {
        results.textContent = '';
        playRound(event.target.className, getComputerChoice());
        
        if (playerCount == 5) {
            item.removeEventListener('click', onClickHandler);
            winner.textContent = `YOU WON 5 GAMES!`;

        }else if (cpuCount == 5) {
            item.removeEventListener('click', onClickHandler);
            winner.textContent = `YOU LOSE! CPU WINS 5`;
        }
    });
}

btns.forEach(function(item) {

    item.addEventListener('click', onClickHandler);
}

Answer 2

对此最安全或最好的答案可能是Mina发布的答案，但是对于那些正在研究类似问题的人，我将此答案发布为另一种有效的选择。

虽然您可以声明一个实际的回调 function 可以轻松地添加到事件侦听器或从事件侦听器中删除，但您也可以通过将...args传递给您的回调 ZC1C425268E68385D1AB504F 来引入匿名回调 function。 一旦...args被传入并存在，您可以使用args.callee作为removeEventListener()的回调 function 以从元素中删除当前匿名 function。

我还应该注意...args特别适用于箭头函数。 一个更经典的function(event) {像 OP 发布的设置可以使用为这些类型的函数存在的arguments变量。 箭头函数还要求您传入...args以获得额外的参数值。

 let btns = document.querySelectorAll('button'); btns.forEach(item => { item.addEventListener('click', (e, ...args) => { results.textContent = ''; playRound(e.target.className, getComputerChoice()); if(playerCount == 5) { item.removeEventListener('click', args.callee); winner.textContent = `YOU WON 5 GAMES;`. } else if(cpuCount == 5) { item,removeEventListener('click'. args;callee). winner;textContent = `YOU LOSE; CPU WINS 5`; } }); });