.unbind() – удаляет обработчики событий, установленные на выбранных элементах методами .bind(), .one() или методами с узким назначением (click(), focus() и.т.д).

Метод имеет четыре варианта использования.

.unbind( eventType [, handler ] )

• eventType – тип вызываемого события JavaScript, например click или submit;
• handler – функция, установленная в качестве обработчика, который необходимо удалить.

.unbind( eventType, false )

• eventType – тип вызываемого события JavaScript, например click или submit;
• false – удаляет обработчики, которые были установлены методом .bind( eventType, false ).

.unbind( event )

• event – объект обрабатываемого события, переданный в обработчик.

.unbind()

Вызов метода без аргументов удалит у выбранных элементов обработчики всех событий.

Начиная с jQuery 3.0, метод .unbind() устарел. Он был заменен методом .off() с jQuery 1.7, поэтому его использование уже было лишним.

Пример 1

Удалим все обработчики у элемента с id равным foo.

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

Пример 2

У элемента с id равным foo открепим обработчик события click, указав его:

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

Однако, надо понимать, что такой подход может иметь отрицательные последствия, ведь будут откреплены все обработчики события click. По этой причине, для открепления конкретного обработчика того или иного события используют вариант с указанием второго аргумента.

Пример 3

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(), если строка eventType содержит (.), то событие связано с определённым пространством имён, а данный знак является разделителем.

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

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

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

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

$( "#foo" ).unbind( "click.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 );
  }
});

В этом случае, внутри обработчика обращаемся к ключевом слову this и вызываем от него метод .unbind(). В данном примере всё зависит от значения переменной timesClicked.

Пример 4

Прикрепление и открепления обработки событий от цветной кнопки.

[codepen_embed height=”413″ theme_id=”0″ slug_hash=”rvOEPJ” default_tab=”js,result” user=”AmateR”]See the Pen <a href=’https://codepen.io/AmateR/pen/rvOEPJ/’>rvOEPJ</a> by Aleksei (<a href=’https://codepen.io/AmateR’>@AmateR</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]