添加带有参数的事件侦听器，然后将其删除

基本场景

这个问题之前已经被问过。其实有人问过标题几乎相同 https://stackoverflow.com/questions/15088010/adding-and-removing-event-listeners-with-parameters但请稍等一下，我认为这个问题还没有一个好的答案。

所以，我们有一个事件监听器：

fancyButton.addEventListener('click', this.launchKitty, true);

然后我们有一个函数：

// assume this.setForLaunch was set somewhere
launchKitty = () => {
  if(this.setForLaunch){ // behold, this!
    console.log('farewell, feline!')
  }
}

我们有一个事件监听器和一个可以访问外部的函数this，这很整洁。移除很简单：

fancyButton.removeEventListener('click', this.launchKitty, true);

但是如果我们不想使用怎么办this?

参数！

如果，而不是依靠this，我们想通过addEventListener一个论点？就像这样：

fancyButton.addEventListener('click', () => {this.launchKitty(true)}, true);

并且稍微修改了一下launchKitty():

launchKitty(setForLaunch) {
  if(setForLaunch){ // now we're using a parameter!
    console.log('farewell, feline!')
  }
}

到目前为止，一切都很好。小猫们推出了。删除监听器怎么样？

fancyButton.removeEventListener('click', () => {this.launchKitty}, true);

不去上班。我们的() => {}是匿名的，因此removeEventListener不知道如何找到它。

问题

我们如何向事件监听器传递一个参数，然后删除所述事件处理程序？

请随意挑战我的任何假设。有很多方法可以启动这只猫。

Thanks!

您应该将当前的匿名函数存储到一个变量中，以便您可以调用removeEventListener稍后再用它：

const launchKittyTrue = () => { this.launchKitty(true) };
fancyButton.addEventListener('click', launchKittyTrue, true);
// later:
fancyButton.removeEventListener('click', launchKittyTrue, true);

为了更加灵活，您可以考虑Map按参数索引，其值是绑定函数：

const boundFns = new Map();
function makeListener(arg) {
  if (!boundFns.has(arg)) {
    boundFns.set(arg, launchKitty.bind(undefined, arg));
  }
  return boundFns.get(arg);
}
function getListener(arg) {
  return boundFns.get(arg);
}
fancyButton.addEventListener('click', makeListener(true), true);
// later:
fancyButton.removeEventListener('click', getListener(true), true);