unbind()

Описание: Удаляет ранее подключенный обработчик события из элементов.

Любой обработчик, который присоединен с .bind() может быть удален с .unbind(). В самом простом варианте, без аргументов, .unbind() удаляет всех обработчиков, прикрепленных к элементу:

$('#foo').unbind();

В этом варианте удаляются обработчики, независимо от типа. Если быть более точным, мы можем передать тип события:

$('#foo').unbind('click');

Указывая тип события click, только обработчики для этого типа события будут удалены. Этот подход однако может еще иметь негативные последствия, если другие сценарии прикрепят поведения на тот же элемент. Надежные и расширяемые приложения обычно требуют 2-аргументную версию по этой причине:

var handler = function() {
  alert('The quick brown fox jumps over the lazy dog.');
};
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);

Именуя обработчиков, мы можем быть уверены, что никакая другая функция не попадет под перекрестный огонь. Обратите внимание, что следующий код не будет работать:

$('#foo').bind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});

$('#foo').unbind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});

Хотя обе функции идентичны по своему содержанию, они создаются отдельно, и JavaScript имеет право держать их в качестве отдельных объектов функции. Для отмены привязки определенного обработчика, мы должны сослаться на эту функцию, а не на какую-либо другую, которая делает то же самое.

Использование пространства имен

Вместо сохранения ссылки на обработчики, чтобы развязать их, мы можем именовать события и использовать эту возможность, чтобы сузить сферу отмены нашей развязки действий. Как было показано в ходе обсуждения для метода .bind(), именование определяется с помощью символа точки (.) при связывании обработчика:

$('#foo').bind('click.myEvents', handler);

Когда обработчик привязан таким образом, мы можем по-прежнему развязать это нормально:

$('#foo').unbind('click');

Однако, если мы хотим избежать влияния на другие обработчики, мы можем быть более конкретным:

$('#foo').unbind('click.myEvents');

При наличии нескольких связанных имен обработчиков, мы можем развязать их всех сразу:

$('#foo').unbind('click.myEvents.yourEvents');

Этот синтаксис аналогичен тому, который используется для селекторов класса CSS; они не являются иерархическими. Этот метод вызова, таким же образом как:

$('#foo').unbind('click.yourEvents.myEvents');

Мы также можем развязать все обработчики в пространстве имен, независимо от типа события:

$('#foo').unbind('.myEvents');

Особенно полезно приложить пространство имен для привязки события, когда мы разрабатываем плагины или иное написание кода, который может взаимодействовать с другими кодами обработки событий в будущем.

Использование объекта события

Вторая форма метода .unbind() используется когда мы хотели бы развязать обработчик из себя. Например, предположим, что мы хотим вызвать обработчик событий только три раза:

var timesClicked = 0;
$('#foo').bind('click', function(event) {
  alert('The quick brown fox jumps over the lazy dog.');
  timesClicked++;
  if (timesClicked >= 3) {
    $(this).unbind(event);
  }
});

Обработчик в данном случае должен принять параметр, так что мы можем захватить объект события и использовать его для отмены привязки обработчика после третьего нажатия. Объект события содержит содержание, необходимое для .unbind(), чтобы узнать, какой обработчик удалить. Этот пример также является иллюстрацией закрытия. Так как обработчик относится к переменной timesClicked, которая определена вне функции, увеличение значения переменной имеет эффект, даже между вызовами обработчика.

Примеры

Пример 1

    function aClick() {
      $("div").show().fadeOut("slow");
    }

    $("#bind").click(function () {
      // could use .bind('click', aClick) instead but for variety...
      $("#theone").click(aClick)
                  .text("Can Click!");
    });
    $("#unbind").click(function () {
      $("#theone").unbind('click', aClick)
                  .text("Does nothing...");
    });

Пример 2

$("p").unbind()

Пример 3

$("p").unbind( "click" )

Пример 4

var foo = function () {
  // code to handle some kind of event
};

$("p").bind("click", foo); // ... now foo will be called 
                                when paragraphs are clicked ...

$("p").unbind("click", foo); // ... foo will no longer be called.