使用箭头函数回调添加和删除事件监听器

Question

我正在尝试使用 javascript

添加和删除按钮的事件侦听器

回调：

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

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

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

但是由于 arrow function.
，我无法通过这种方法 removeEventListener 对此有适当的解决方法吗？

Answer 1

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

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

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

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

// ...

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

Answer 2

let func = () => callback(id);
document.querySelector('#button').removeEventListener('click', func);

使用箭头函数回调添加和删除事件监听器

Add and Remove an Event Listener with an arrow function callback

javascript

addeventlistener

event-listener

removeeventlistener