Javascript removeEventListener не работает внутри класса
У меня есть класс, допустим SomeClass на странице, на которой есть кнопка с id some-button. Я назначил ей событие при клике, нужно после клика сразу его удалить. Пробовал передавать this, но без результатно. Кажется, что после выполнения функции он просто игнорирует удаление обработчика события. Вот код класса:
class SomeClass {
constructor() {
this.button = document.getElementById('some-button');
this.button.addEventListener('click', this.someFunction.bind(this));
}
someFunction() {
console.log('hello');
this.button.removeEventListener('click', this.someFunction.bind(this));
}
}
Ответы
Решение
Функцию которую вы передаете в addEventListener() и которую передаете для удаления в removeEventListenter() не одно и тоже. Каждый раз, вызывая this.someFunction.bind(this) вы генерируете разные идентификаторы при передаче. Можно вынести обработчик в отдельную переменную и уже ее присваивать регистраторам событий. Пример:
class SomeClass {
constructor() {
this.button = document.getElementById('some-button');
this.buttonHandler = this.someFunction.bind(this);
this.button.addEventListener('click', this.buttonHandler);
}
someFunction() {
console.log('hello');
this.button.removeEventListener('click', this.buttonHandler);
}
}