Методы .bind() и .unbind()

Определение и применение

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

Синтаксис

collection.bind(events, handler);
collection.bind(events, eventData, handler);
collection.bind({ click: handler, focus: anotherHandler });
collection.unbind(events, handler);
collection.unbind(".panel");
collection.unbind();

Параметры и возвращаемое значение

events — строка типов событий через пробел, при необходимости с пространством имён: click.panel. eventData передаётся обработчику как event.data. Результат обоих методов — исходная коллекция jQuery.

Для снятия одного обработчика передавайте ту же ссылку на функцию. .unbind("click") удаляет все jQuery-обработчики этого типа на выбранных элементах, а вызов без аргументов — все типы; обработчики, добавленные нативным addEventListener(), таким способом не снимаются.

В старом API допустим обработчик false, сокращающий отмену стандартного действия и всплытия; соответствующий обработчик можно снять через .unbind(events, false). Также встречается форма .unbind(event) внутри текущего обработчика.

Особенности и совместимость

Методы устарели с 3.0 и остаются доступны в 4.0. Для нового кода используйте .on() и .off() с теми же событиями, данными и ссылкой на функцию.

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

Документация

• bind — jQuery API
• unbind — jQuery API

Пример старого кода

Назначение и снятие прямого обработчика: попробуйте сами

Первое программное событие увеличивает счётчик. После снятия обработчика второе его не меняет. Используется jQuery 4.0.0.

index.html

HTML

<button id="action">Действие</button>
<pre id="result"></pre>

main.js

JavaScript

let count = 0
function handle() {
    count++
}
const button = $('#action')
button.bind('click.demo', handle)
button.trigger('click')
button.unbind('click.demo', handle)
button.trigger('click')
$('#result').text('Вызовов: ' + count)