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

Question

基本场景

这个问题之前已经被问过。事实上，有人问过with nearly the same title但请稍等一下，我认为这个问题还没有一个好的答案。

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

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 不知道如何找到它。

问题

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

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

谢谢!

Answer 1

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

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

为了更加灵活，您可以考虑使用参数索引的 Map，其值是绑定(bind)函数:

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);