Как в typescript удалить event handler?

Question

[sanex3339]

Проблема:

window.addEventListener(eventType, event => this._handler(event));
window.removeEventListener(eventType, event => this._handler(event));

private _handler (event) {
    this._blablabla(event.pageX, event.pageY);
}

Таким способом эвент аттачится к window, но не удаляется.

Если делать таким способом

window.addEventListener(eventType, this._handler);
window.removeEventListener(eventType, this._handler);

Работает,разумеется, но внутри хендлера не будут доступны свойства и методы класса через this.

Через

window.addEventListener(eventType, this._handler.bind(this));
window.removeEventListener(eventType, this._handler.bind(this));

тоже не работает.

Как правильно удалить event handler в таком случае?

Answer 1

[Константин Китманов]

Через this._handler.bind(this) не работает потому что Function#bind возвращает новую функцию (причем каждый раз разную, т.е.

this._handler.bind(this) !== this._handler.bind(this)

).
Соответственно, надо как-то так:

this.boundHandler = this.handler.bind(this);
window.addEventListener(eventType, this.boundHandler);
//...
window.removeEventListener(eventType, this.boundHandler);

Ну естественно можно написать какую-то обертку. Например:

function bound (eventType: string, handler: Function, context: any): Function {
    var boundHandler = handler.bind(context);
    window.addEventListener(eventType, boundHandler);
    return () => window.removeEventListener(eventType, boundHandler);
}

Такая функция вернет функцию, которая при вызове отвяжет ранее привязанный обработчик.