JavaScript事件监听器无法移除，gameLoop调用后操作重复触发多次

我遇到了事件监听器无法移除的问题，每次调用gameLoop函数时，所有操作都会重复执行2次、4次甚至更多次。相关代码如下：

function gameLoop(data) {
    let currentQuestion = newQuestion(data); // 随机生成题目

    displayAnswers.forEach(element => { // 移除标记对错的样式类
        element.classList.remove('correct');
        element.classList.remove('incorrect');
        element.removeEventListener('click', handleAnswerClick); // 移除监听器无效
    });

    renderUi(currentQuestion); // 将题目和答案渲染到页面

    displayAnswers.forEach(element => { 
        element.addEventListener('click', handleAnswerClick);
    });

    function handleAnswerClick(event) {
        checkAnswer(event, currentQuestion, data);
    }
}

问题根源 #

每次调用gameLoop时，都会在函数内部重新定义一个全新的handleAnswerClick函数。removeEventListener要求传入的函数引用必须和添加时完全一致，但每次循环生成的handleAnswerClick都是不同的函数实例，导致移除操作无法匹配到之前添加的监听器。旧的监听器残留，新的不断叠加，最终触发次数翻倍。

解决方法 #

方法一：将事件处理函数移到外部

把handleAnswerClick放在gameLoop外部，确保每次添加/移除的是同一个函数引用：

let currentQuestion;

function handleAnswerClick(event) {
    checkAnswer(event, currentQuestion, data);
}

function gameLoop(data) {
    currentQuestion = newQuestion(data);

    displayAnswers.forEach(element => {
        element.classList.remove('correct');
        element.classList.remove('incorrect');
        element.removeEventListener('click', handleAnswerClick);
    });

    renderUi(currentQuestion);

    displayAnswers.forEach(element => { 
        element.addEventListener('click', handleAnswerClick);
    });
}

方法二：使用事件委托

直接在父元素上绑定一次监听器，避免反复操作子元素的监听器：

// 初始化时仅绑定一次
document.querySelector('.answers-container').addEventListener('click', function(event) {
    if (event.target.matches('.answer-option')) { // 假设答案选项有该类名
        checkAnswer(event, currentQuestion, data);
    }
});

function gameLoop(data) {
    currentQuestion = newQuestion(data);

    displayAnswers.forEach(element => {
        element.classList.remove('correct');
        element.classList.remove('incorrect');
    });

    renderUi(currentQuestion);
}

方法三：保存函数引用到元素属性

如果必须在gameLoop内部定义处理函数，可以将函数引用存储在元素的自定义属性中，移除时调用该引用：

function gameLoop(data) {
    let currentQuestion = newQuestion(data);

    displayAnswers.forEach(element => {
        element.classList.remove('correct');
        element.classList.remove('incorrect');
        if (element._clickHandler) {
            element.removeEventListener('click', element._clickHandler);
            element._clickHandler = null;
        }
    });

    renderUi(currentQuestion);

    displayAnswers.forEach(element => { 
        element._clickHandler = function(event) {
            checkAnswer(event, currentQuestion, data);
        };
        element.addEventListener('click', element._clickHandler);
    });
}

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