Почему не удаляется event listener?

Question

[lavezzi1]

Есть класс, в методе show подписываюсь на node элемент:

this.overlay.addEventListener('click', this.hide.bind(this));

В методе hide отписываюсь:

this.overlay.removeEventListener('click', this.hide.bind(this));

Но через хромовский devtools если смотреть, то на node все равно весит обработчик на клик.

Answer 1

[Алексей Шашенков]

Через декоратор

let _this=this
let hideHandler=(e)=>{_this.hide(e,this)}
this.overlay.addEventListener('click', hideHandler);
//...... где-то по коду
this.overlay.removeEventListener('click', hideHandler);

Answer 2

[Negwereth]

Bind всегда возвращает новую копию функции. Сохраните результат в переменную и вешайте/снимайте уже её

Comments

[lavezzi1]

А альтернативы есть? Сохранять переменную между методами не прикольно

[Роман Александрович]

lavezzi1: в реакте js bind можно повесить в конструкторе а еще если использовать arrow function то bind присвоится автоматически

[lavezzi1]

Роман Александрович: не, у меня не реакт. А можно пример про arrow function? просто не хочется в конструкторе что то подобное писать
this.hideEvent = this.hide.bind(this);

[Роман Александрович]

lavezzi1:

this.overlay.addEventListener('click',()=>this.hide);

попробуйте так

[lavezzi1]

Роман Александрович: работает но слушатель не удаляется

[Роман Александрович]

lavezzi1: значит только через конструктор

[Negwereth]

Слушатель удаляется только по прямой ссылке на функцию-коллбек.