JavaScript: Каким образом отвязать обработчик от события, если использовалось связывание (bind)?

Question

[Павел Китьян]

Если я делаю $('селектор').on('click', clickHandler), то отвязка - $('селектор').off('click', clickHandler)
А вот как быть, если $('селектор').on('click', this.method.bind(this))?
Мне остаётся только $('селектор').off('click')
Но я не хочу все обработчики отвязывать.

Answer 1

[RubaXa]

Используйте namespace:

$('селектор').on('click.uniq-namespace', clickHandler);
// ...
$('селектор').off('click.uniq-namespace'),

Comments

[Павел Китьян]

А вот это похоже дело! Спасибо. Правда, небольшая загвоздка в том, что имея 10 инстансов виджета на одной странице, я должен для них сгенерить уникальные неймспейсы. А они друг про друга ничего не знают. И дестрой одного из них, не должен вызвать отвязывание обработчиков событий (например, клик на body) у других.

[RubaXa]

Если виджет у вас функция конструктор, то можно тогда и без namespace, если обработчиков меньше 1-2.

[RubaXa]

function Widget(selector) {
   this.method = this.method.bind(this);

   this.$el = $(selector);
   this.$el.on('click', this.method);
}
Widget.prototype = {
    destroy: function () {
        this.$el.off('click', this.method);
    }
};

[RubaXa]

или такой вариант

function Widget(selector) {
   this._ns = (Math.random() * 1e6|0).toString(36)

   this.$el = $(selector);
   this.$el.on('click.' + this._ns, this.methodFoo.bind(this);
   this.$el.on('input.' + this._ns, this.methodBar.bind(this);
}
Widget.prototype = {
    destroy: function () {
        this.$el.off('.' + this._ns);
    }
};

[Павел Китьян]

Вот! Я как раз делал только что пример: jsfiddle.net/kityan/6Ls5Z

[Павел Китьян]

bind-ов я там не использовал для упрощения кода, но с ns-ами вроде бы всё понял
Только вот что вы имели ввиду насчёт - "без namespace, если обработчиков меньше 1-2.", мне не ясно.

[Павел Китьян]

Хочу также уточнить один момент. Нужно ли в дестрое удалять обработчики, которые висят на событиях на элементах моего же виджета? Я же их все похерю в дестроее: $(selector *').remove().
Можно ли удалять только с тех элементов - которые вне виджета и, соответственно, останутся жить? Они точно могут вызывать утечку памяти и, более того, буду продолжать срабатывать.

По идее, если элемент убран из дерева, все его обработчики и так сдохнут?

[Павел Китьян]

Собственно, вчера я формулировал этот вопрос: Как правильно дестроить самописный плагин jQuery?

Answer 2

[Миша Васильев]

api.jquery.com/unbind

Comments

[Павел Китьян]

Я там ответа не нашел. И еще один момент, то .bind(), про который я пишу - это не jQuery, это JavaScript-овый, для привязки контекста.

Answer 3

[fAra0N25]

Надо запоминать обработчик, если не запоминаешь, то стандартными средствами не как, можно только отвязать все обработчики на конкретное событие.
Если через костыль, то в теории можно удалять из массива обработчиков на конкретном DOM элементе, элемент в котором храниться этот обработчик.

Comments

[Павел Китьян]

Понятно, что можно запоминать, но тогда еще больше городить придётся. А вот через массив... хм.

[Павел Китьян]

Вопрос в том, как понять, перебирая обработчики на body, например, где - чей? Где - от какого виджета? Который мы должны отвязать при дестрое? Функция в плагине, который вешается на событие, может быть как атрибутом объекта, так и просто функцией внутри замыкания плагина, которая живёт только за счет того, что привязана к событию. Вроде так? В общем, неймспейсы - оптимально.