Добавление и удаление прослушивателя событий с помощью обратного вызова функции стрелки

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

Вам нужна ссылка на тот же самый функциональный объект, чтобы иметь возможность снова удалить этот конкретный c прослушиватель событий.

Таким образом, вы должны сохранить его в переменной, а затем использовать эту переменную в оба вызова 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);