Javascript删除事件

我有一个带有init和destroy方法的简单库“library”

在init函数中，我有类似的代码：

var items = document.querySelector('....);

items.forEach(item => item.addEventListener(function(item) {
    return library.onClick(item)
});

所以我想在destroy上删除事件处理程序

因为我需要该项作为参数，所以在“addEventListener”上传递匿名函数

但是如果我在removeEventListener上执行相同的操作，那么函数就不同了，因此不会删除任何事件

如何在不使用bind的情况下实现这一点是最好的方法

我应该保存对函数的引用并使用它们删除事件吗

---

谢谢

一个选项是创建一个

映射

，将

项

映射到其关联的处理程序-这样，给定一个

项

，您就可以

。获取添加到该元素的处理程序：

const handlersByItem = new Map(
  [...items].map(item => [item, library.onClick(item)])
);
items.forEach((item) => {
  // make sure to declare the event type
  item.addEventListener('click', handlersByItem.get(item));
});

// To remove:
items.forEach((item) => {
  item.removeEventListener('click', handlersByItem.get(item));
});

或者，如果合适，您可以使用事件委派-而不是向每个元素添加单独的处理程序，您可以向容器添加单个处理程序，然后检查单击的
目标是否存在于
映射中
-如果存在，则调用关联函数。这样，您只有一个单独的处理程序可以附加到DOM并从DOM中分离