添加和删​​除带有箭头函数回调的事件侦听器

Question

我正在尝试使用 javascript 向按钮添加和删除事件侦听器

打回来：

let callback = (id) => alert(`This is a test Callback with id : ${id}`);

当我将它与这样的事件侦听器一起使用时，它会起作用：

document.querySelector('#button').addEventListener('click', () => callback(id));

但是用这种方法我不能，removeEventListener因为arrow function.
是否有适当的解决方法？

Answer 1

您需要引用完全相同的函数对象，才能再次删除该特定事件侦听器。

因此，您必须将它存储到一个变量中，然后在 addEventListener 和 removeEventListener 调用中使用该变量。

let foo = () => callback(id);

document.querySelector('#button').addEventListener('click', foo);

// ...

document.querySelector('#button').removeEventListener('click', foo);