Javascript removeEventListener не работает внутри класса

07.05.24 в 11:16

Тестовый

179

У меня есть класс, допустим 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));
    }
}

js class removeeventlistener event событие удалить

Ответы

Денис Попов

Функцию которую вы передаете в 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);
    }
}

07.05.24 в 12:03