ES6 for循环中removeEventListener不生效问题解决

removeEventListener 生效的核心要求是：传入的事件处理函数，必须和之前addEventListener绑定的函数是同一个引用，你的代码有两个致命问题导致移除失败：

• 你绑定mouseover/mouseout时用的是循环内临时创建的内联箭头函数，没有把这些函数的引用存下来，后续根本找不到要移除的目标函数。
• 你写的this.parent[i].removeEventListener('mouseover', this.addChildrenActive(i))是错误写法：这行代码会立即执行addChildrenActive方法，把方法的返回值（你的方法没有返回值，实际传的是undefined）当作事件处理函数传入，完全匹配不到之前绑定的监听，自然无法移除。

1. 提前为每个导航项生成固定引用的事件处理函数，不要在绑定/移除时临时创建匿名函数，保证绑定和移除时用的是同一个函数对象。
2. 每次切换端态重新绑定事件前，先清空所有已绑定的旧事件，避免事件残留、重复绑定。

修正后的完整代码如下：

// 组件初始化时调用一次，提前生成固定引用的事件处理函数
initNavEventHandlers() {
  this.navEventMap = []
  for (let i = 0; i < this.parent.length; i++) {
    this.navEventMap[i] = {
      // 移动端点击事件处理
      click: (e) => {
        e.preventDefault()
        this.addChildrenActive(i)
      },
      // 桌面端hover移入处理
      mouseover: () => {
        this.addChildrenActive(i)
      },
      // 桌面端hover移出处理
      mouseout: () => {
        // 注意：如果你的业务要求移出时隐藏下拉，可以在这里补对应的隐藏逻辑，和你原有业务保持一致即可
        this.addChildrenActive(i)
      }
    }
  }
},

navbarInteraction(){
  for (let i = 0; i < this.parent.length; i++) {
    const navItem = this.parent[i]
    const handlers = this.navEventMap[i]
    // 先全量移除当前项上所有相关的旧事件，避免残留
    navItem.removeEventListener('click', handlers.click)
    navItem.removeEventListener('mouseover', handlers.mouseover)
    navItem.removeEventListener('mouseout', handlers.mouseout)

    if (this.isMobile) {
      // 移动端仅绑定点击事件
      navItem.addEventListener('click', handlers.click)
    } else {
      // 桌面端仅绑定hover相关事件
      navItem.addEventListener('mouseover', handlers.mouseover)
      navItem.addEventListener('mouseout', handlers.mouseout)
    }
  }
}

• 必须在首次调用navbarInteraction前执行一次initNavEventHandlers()，不要在navbarInteraction循环内临时创建处理函数，否则每次循环都会生成新的函数引用，还是会出现移除失败的问题。
• 如果你的业务需要监听窗口尺寸变化动态切换isMobile状态，每次状态更新后直接重新调用navbarInteraction即可，方法内会自动清理旧事件、绑定对应端需要的新事件，不会出现两种交互逻辑同时生效的问题。

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