Как удалить обработчик события?

Question

[Никита Егоров]

Вот есть класс (а вот фидл):

class ProgressBar {
    constructor(wrapper, line) {
    	this.wrapper = wrapper;
        this.line    = line;
    
    	wrapper.addEventListener('mousemove', this.listener.bind(this, [line]));
        wrapper.removeEventListener('mousemove', this.listener);
    }
    
    listener([line], event) {
    	line.style.width = event.clientX + 'px'
    }
}

По сути ползунок не должен работать, так как я сразу удаляю обработчик, но это не так. Как же правильно удалить слушателя?

Answer 1

[Дмитрий Беляев]

Если в объекте используется всего 1 событие (или все события допустимо обрабатывать одним обработчиком), то можно обойтись без bind и прочих хитростей по сохранению контекста:

class ProgressBar {
    constructor(wrapper, line) {
    	this.wrapper = wrapper;
        this.line    = line;

        // передаем объект а не функцию оО
    	wrapper.addEventListener('mousemove', this);
        wrapper.removeEventListener('mousemove', this);
    }

    // что бы использовать объект в качестве слушателя,
    // у него должен быть метод handleEvent - именно он будет получать события
    handleEvent(event) {
    	this.line.style.width = event.clientX + 'px'
    }
}

https://developer.mozilla.org/ru/docs/Web/API/Even...

Comments

[Никита Егоров]

Ого, спасибо.

Answer 2

[Алексей Уколов]

Байнд создаёт новую функцию, а удаляете вы старую. Вынесите байндинг в отдельную переменную и передайте в *EvenListener её.

Comments

[Алексей Уколов]

Зачем вообще line передавать в аргументах? Или это сильно упрощённый пример?

[Никита Егоров]

Алексей Уколов, да, там вообще объект

[Алексей Уколов]

Ну, что объект это не так важно — через this же можно добраться до значения. Просто странно — вы и в this его сохраняете и через аргументы передаёте, одна из этих операций выглядит лишней.

[Никита Егоров]

Алексей Уколов, я просто сначала думал, что проблема в аргументах, поэтому и пример с аргументами.

А как правильно назвать переменную с ссылкой на забинденную функцию, что бы не стыдно было показать?

[Алексей Уколов]

Да так же, как метод называется, который байндите, коллизий же не будет.

[Никита Егоров]

Алексей Уколов, а ну да.

[Алексей Уколов]

Вернее, если всё же не нужно байндить аргументы, а только контекст (или аргументы одинаковы для всех), принято делать так: this.listener = this.listener.bind(this); и дальше с ним работать как с обычным методом.

[Никита Егоров]

Алексей Уколов, а, все понял, спасибо.