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

Question

[yura_born]

Всем привет, устанавливаю листенеры в функции:

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));
    }
  }

Но что-то мне так не нравится, я постоянно повторяю объявленные листенеры, а если их будет много .....
Подскажите плз., как лучше и правильно сделать удаление листенеров?

Comments

[WbICHA]

if (btnGarageNext !== null) {
      btnGarageNext.addEventListener('click', this.onButtonGarageNext.bind(this));
    }

На опшинал чейнинг у тебя аллергия? Зачем это уродство?

я постоянно повторяю объявленные листенеры

Зачем? Если так уж надо, то сделай отдельную функцию чтобы DRY не плодить.

Answer 1

[Sergio]

По-моему у вас некорректно удаляются 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

Comments

[yura_born]

спасибо