@yura_born

Как лучше использовать removeEventListener?

Всем привет, устанавливаю листенеры в функции:
addListeners(): void {
    const menuBbtn = document.querySelector('.top-menu');
    const btnGarageNext = document.querySelector('#btn-garage-next');
    const btnGaragePrev = document.querySelector('#btn-garage-prev');
    if (btnGarageNext !== null) {
      btnGarageNext.addEventListener('click', this.onButtonGarageNext.bind(this));
    }
    if (btnGaragePrev !== null) {
      btnGaragePrev.addEventListener('click', this.onButtonGaragePrev.bind(this));
    }
    if (menuBbtn !== null) {
      menuBbtn.addEventListener('click', this.onButtonMenu.bind(this));
    }
  }


И мне потом нужно их удалить т.к страница будет перерендериваться, написал вот так:
removeListeners(): void {
    const menuBbtn = document.querySelector('.top-menu');
    const btnGarageNext = document.querySelector('#btn-garage-next');
    const btnGaragePrev = document.querySelector('#btn-garage-prev');
    if (btnGarageNext !== null) {
      btnGarageNext.removeEventListener('click', this.onButtonGarageNext);
    }
    if (btnGaragePrev !== null) {
      btnGaragePrev.removeEventListener('click', this.onButtonGaragePrev);
    }
    if (menuBbtn !== null) {
      menuBbtn.addEventListener('click', this.onButtonMenu.bind(this));
    }
  }

Но что-то мне так не нравится, я постоянно повторяю объявленные листенеры, а если их будет много .....
Подскажите плз., как лучше и правильно сделать удаление листенеров?
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ответы на вопрос 1
@sergiodev
Программист типо
По-моему у вас некорректно удаляются listener-ы, т.к. вы связывая метод с this через вызов this.onButtonGarageNext.bind(this) вы тем самым создаёте новую функцию, а в removeEventListener() вы передаете сам метод onButtonGarageNext. Получается, что ничего не удалится, т.к. такая функция не навешана не событие click и listener не найдётся при удалении.

Нужно где-то запомнить функцию, возвращаемую из bind() и потом передавать её в removeEventListener().

Насчёт повторяющегося кода - я бы записал ссылки на элементы .top-menu, #btn-garage-next, #btn-garage-prev в какое-нибудь поле класса при инициализации, и потом их переиспользовал в removeListeners(), например:

this.menuBbtn = document.querySelector('.top-menu');
this.btnGarageNext = document.querySelector('#btn-garage-next');
this.btnGaragePrev = document.querySelector('#btn-garage-prev');


Если вы используете React, то там для этого есть специальный атрибут ref - https://ru.reactjs.org/docs/refs-and-the-dom.html
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы