如何一次性移除多个JavaScript事件监听器？

我开发了一款石头剪刀布游戏，设置了button1、button2、button3三个按钮，每个按钮都通过addEventListener绑定了对应的点击事件监听器myButton1、myButton2、myButton3，监听器内包含游戏逻辑。示例代码片段如下：

button1.addEventListener('click', function myButton1(e) {
    results.textContent = playRound("rock", getComputerChoice())
    score.textContent = ` ${playerScore} - ${computerScore}`
    if (playerScore >= 5 && computerScore >= 5 && playerScore===computerScore) {
        score.textContent = `The game is now over. Final score: ${playerScore} - ${computerScore}. Game ends in a draw!`
        // 这里需要移除所有按钮的事件监听器
    }
});

当上述代码中的if条件触发时，我希望一次性移除所有按钮的事件监听器，请问该如何实现？

要实现这个需求，核心是确保removeEventListener使用与addEventListener完全相同的函数引用——因为匿名函数（哪怕是命名函数表达式）无法被准确匹配移除，所以我们需要把监听器函数单独声明，或者统一管理按钮与监听器的配对关系。

方案1：单独声明监听器函数，统一移除 #

先把每个按钮的监听器函数单独定义，然后在游戏结束的条件块里，调用removeEventListener逐个移除：

// 单独声明监听器函数
function myButton1(e) {
    results.textContent = playRound("rock", getComputerChoice());
    score.textContent = ` ${playerScore} - ${computerScore}`;
    checkGameEnd();
}

function myButton2(e) {
    results.textContent = playRound("scissors", getComputerChoice());
    score.textContent = ` ${playerScore} - ${computerScore}`;
    checkGameEnd();
}

function myButton3(e) {
    results.textContent = playRound("paper", getComputerChoice());
    score.textContent = ` ${playerScore} - ${computerScore}`;
    checkGameEnd();
}

// 绑定监听器
button1.addEventListener('click', myButton1);
button2.addEventListener('click', myButton2);
button3.addEventListener('click', myButton3);

// 统一检查游戏结束并移除监听器的函数
function checkGameEnd() {
    if (playerScore >= 5 && computerScore >= 5 && playerScore === computerScore) {
        score.textContent = `The game is now over. Final score: ${playerScore} - ${computerScore}. Game ends in a draw!`;
        // 移除所有按钮的监听器
        button1.removeEventListener('click', myButton1);
        button2.removeEventListener('click', myButton2);
        button3.removeEventListener('click', myButton3);
    }
}

方案2：用数组管理按钮与监听器配对，批量移除 #

如果按钮数量较多，用数组统一管理按钮和对应的监听器，能让代码更简洁，便于维护：

// 声明监听器函数
function myButton1(e) {
    handlePlayerChoice("rock");
}

function myButton2(e) {
    handlePlayerChoice("scissors");
}

function myButton3(e) {
    handlePlayerChoice("paper");
}

// 存储按钮与对应监听器的配对数组
const buttonListenerPairs = [
    { button: button1, listener: myButton1 },
    { button: button2, listener: myButton2 },
    { button: button3, listener: myButton3 }
];

// 批量绑定监听器
buttonListenerPairs.forEach(pair => {
    pair.button.addEventListener('click', pair.listener);
});

// 统一处理玩家选择的函数，避免重复代码
function handlePlayerChoice(choice) {
    results.textContent = playRound(choice, getComputerChoice());
    score.textContent = ` ${playerScore} - ${computerScore}`;
    
    if (playerScore >= 5 && computerScore >= 5 && playerScore === computerScore) {
        score.textContent = `The game is now over. Final score: ${playerScore} - ${computerScore}. Game ends in a draw!`;
        // 批量移除所有监听器
        buttonListenerPairs.forEach(pair => {
            pair.button.removeEventListener('click', pair.listener);
        });
    }
}

关键说明 #

• removeEventListener必须传入和addEventListener完全一致的函数引用，所以不能直接在addEventListener里写匿名函数（除非提前把匿名函数的引用保存下来）。
• 把重复的游戏结束判断逻辑抽成单独函数，能减少代码冗余，也让移除监听器的逻辑更集中。

内容的提问来源于stack exchange，提问作者Iltsukka