原生JavaScript中如何正确使用removeEventListener移除事件监听器

原有代码失效的核心原因 #

• 循环变量的闭包偏移：因为用var声明的循环变量i属于函数作用域，所有点击事件回调共享同一个i引用。等用户实际触发点击时，for循环已经执行完毕，i的值固定为answerChoice.length，根本无法定位到当初绑定事件、甚至用户实际点击的目标<li>元素。
• 事件移除的规则限制：removeEventListener必须传入与addEventListener时完全一致的函数引用才能生效。原代码每次绑定的都是全新的匿名函数，没有留存函数的引用，就算索引指向正确，也匹配不上要移除的监听器。
• 语法缺失问题：原代码中removeEventListener的调用没有传入第二个必填的函数引用参数，直接执行就会抛出语法错误。

适配现有代码环境的修正实现 #

全程使用兼容var的原生写法，不引入块级作用域、箭头函数等不符合现有环境的语法：

var answerChoice = document.querySelectorAll(".answer-choice");

function evaluateUserChoice(randomQ) {
  for (var i = 0; i < answerChoice.length; i++) {
    // 给当前DOM元素绑定自定义属性，提前存储事件处理函数的引用
    answerChoice[i].handleClick = function(event) {
      var element = event.target;
      // 事件触发第一时间，从当前元素上取出存好的函数引用，完成监听器移除
      // 完全绕开闭包对i的引用问题，不需要依赖循环索引定位元素
      element.removeEventListener("click", element.handleClick);

      // 原有的计分判断逻辑
      if (element.textContent === randomQ.correct) {
        score++;
        numberCorrect.textContent = score;
      }
      // 触发新题目生成，重置所有选项
      makeQuestion();
    }
    // 绑定事件时直接使用存储好的函数引用，不要传匿名回调
    answerChoice[i].addEventListener("click", answerChoice[i].handleClick);
  }
}

关键逻辑说明 #

• 监听器的正确移除位置：只要用户触发了一次点击，就在事件回调的最开头执行移除操作，不需要拆分到答对、答错的分支里重复写，从根源上避免用户在题目重置完成前重复点击选项、触发重复计分的问题。
• 引用匹配的核心逻辑：把事件处理函数直接存到对应DOM元素的自定义属性上，不管循环的闭包问题怎么影响索引取值，只要拿到实际触发事件的元素，就能取到当初绑定的函数引用，满足removeEventListener的严格引用匹配要求。
• 冗余逻辑合并：不管用户选择的答案正确与否，后续都要执行生成新题目的逻辑，所以不需要在if、else两个分支里重复写makeQuestion()和移除监听器的代码。

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