JavaScript事件异常：removeEventListener无法正常移除事件监听

嘿，我明白你遇到的麻烦了——每次调用函数后，事件监听器没真正从imageEvilRace元素上移除，导致第二次调用时killRacer会重复删除目标元素，对吧？这问题的核心其实是事件监听器的引用不匹配，咱们一步步搞定它：

问题根源 #

你大概率是在每次调用函数时，都用了匿名函数作为事件处理逻辑。比如这样：

function startRace() {
  const el = document.getElementById('imageEvilRace');
  // 每次调用都会创建一个全新的匿名函数实例
  el.addEventListener('click', () => killRacer());
}

匿名函数每次都是新的引用，当你尝试用removeEventListener移除时，找不到对应的旧函数，导致旧监听器一直留在元素上。第二次调用时又绑定新的监听器，点击元素就会触发多次killRacer，自然会重复删除目标。

解决方案 #

方案1：使用命名函数统一引用 #

把事件处理逻辑抽成一个可复用的命名函数，确保添加和移除监听器时用的是同一个引用：

// 定义全局/模块级的命名处理函数
function handleRaceClick() {
  killRacer();
}

function startRace() {
  const el = document.getElementById('imageEvilRace');
  
  // 先移除已存在的监听器（避免重复绑定）
  el.removeEventListener('click', handleRaceClick);
  // 再绑定新的监听器
  el.addEventListener('click', handleRaceClick);
}

function killRacer() {
  // 先判断目标元素是否存在，避免重复删除报错
  const target = document.getElementById('your-target-id');
  if (target) {
    target.remove();
  }
}

方案2：用元素自定义属性存储监听器实例 #

如果你的处理逻辑需要动态生成（比如每次调用有不同参数），可以把监听器实例存在元素的自定义属性里，确保每次移除的是当前绑定的那个：

function startRace() {
  const el = document.getElementById('imageEvilRace');
  
  // 先移除之前绑定的监听器
  if (el._raceClickListener) {
    el.removeEventListener('click', el._raceClickListener);
  }
  
  // 创建新的处理函数并存储到元素属性
  el._raceClickListener = () => {
    killRacer();
    // 如果只需要触发一次，也可以在这里直接移除监听器
    // el.removeEventListener('click', el._raceClickListener);
    // delete el._raceClickListener;
  };
  
  // 绑定新的监听器
  el.addEventListener('click', el._raceClickListener);
}

function killRacer() {
  const target = document.getElementById('your-target-id');
  if (target) {
    target.remove();
  }
}

关键要点 #

• removeEventListener必须和addEventListener使用完全相同的函数引用才能生效，匿名函数做不到这一点。
• 在绑定新监听器前先移除旧的，避免同一元素上绑定多个相同逻辑的监听器。
• 在killRacer里增加元素存在性判断，就算多次触发也不会抛出“删除不存在元素”的错误。

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