Javascript 如何将参数传递给addEventListener的回调函数

我想在listener中添加一个用于window，另一个用于element，当下拉菜单出现时，这两个必须启用， 所以我得到了elementscroll的ref，我需要在回调函数中传递它来删除侦听器

 <a
     href="#"
     onClick={e => {
      e.preventDefault();
      e.stopPropagation();
      this.openMenu(scroll);
    }}
   >
    <i className="fas fa-ellipsis-h" />
 </a>

openMenu = (scroll,e) => {
 this.setState(prevState => ({ showMenu: !prevState.showMenu }),
  () => {
    document.addEventListener("click", this.closeMenu);
    scroll.addEventListener('scroll',() => this.closeMenu(scroll))
   }
);
};

  closeMenu = (scroll,e) => {
    this.setState({ showMenu: false }, () => {
     document.removeEventListener("click", this.closeMenu);
     scroll.removeEventListener('scroll',() => this.closeMenu(scroll))
    });
   };

---

在这种情况下，我无法删除侦听器，因为他与原始侦听器的名称不同，因此我如何解决它？

考虑根据需要使用组件类实例定义一个共享scrollHandler函数，在添加和删除scroll的侦听器时，该函数将同时传递给addEventListener和removeEventListener

此方法允许您在scroll事件处理程序中保留openMenu的上下文或闭包，这意味着您可以将scroll变量传递到此。closeMenu：

---

希望这有帮助

我认为在这种情况下，即使在状态更新之前删除事件处理程序也是可以的。允许您内联事件处理程序删除：

openMenu = (scroll,e) => {
  this.setState(
    prevState => ({ showMenu: !prevState.showMenu }),
    () => {
      const component = this;
      function handler() {
        component.closeMenu();
        document.removeEventListener('click', handler);
        scroll.removeEventListener('scroll', handler);
      }
      document.addEventListener('click', handler);
      scroll.addEventListener('scroll', handler);
    }
  );
};

closeMenu = () => {
  this.setState({ showMenu: false });
};

---

如果需要传递除偶数对象之外的参数，请将事件处理程序包装到绑定到eventListener的匿名函数中，并且箭头函数没有此关键字或新关键字。

openMenu = (scroll,e) => {
  this.setState(
    prevState => ({ showMenu: !prevState.showMenu }),
    () => {
      const component = this;
      function handler() {
        component.closeMenu();
        document.removeEventListener('click', handler);
        scroll.removeEventListener('scroll', handler);
      }
      document.addEventListener('click', handler);
      scroll.addEventListener('scroll', handler);
    }
  );
};

closeMenu = () => {
  this.setState({ showMenu: false });
};