.off() – удаляет с выбранных элементов страницы обработчики событий, установленные с помощью метода .on()

Функция имеет два варианта использования.

.off( events [, selector ] [, handler ] )

• evenst – тип(ы) обрабатываемых событий. Например “click”, “resize” и т.д. Может быть указано сразу несколько типов, разделенных пробелами, а так же, могут быть указаны пространства имен.
• selector – селектор, который должен совпадать с селектором переданным в метод .on() при назначении обработчика.
• handler – обработчик, назначенный ранее для события(ий) и который необходимо удалить

.off( events [, selector ] )

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

• evenst – объект, в котором нужно перечислить типы событий и соответствующие им удаляемые обработчики. Задается в формате {events-1:handler-1, events-2:handler-2, ...}, где events-i и handler-i соответствуют параметрам events и handler в первом варианте метода (описанном выше).
• selector – селектор, который должен совпадать с селектором переданным в метод .on() при назначении обработчика.

Метод .off() удаляет обработчики событий, которые были назначены методом .on(). Конкретные обработчики событий могут быть удалены из элемента путем представления комбинации имен событий, пространства имен, селекторов или названию обработчика.

Если вы пишете плагин или работаете с объемным кодом, над которым работают другие люди, желательно при установке обработчиков событий использовать пространство имен, чтобы в последствии можно было безболезненно удалять с элементов свои обработчики, не затрагивая чужих. Если указать только пространство имен: '.myPlagin', то с выбранных элементов будут удалены обработчики всех типов событий, с указанным пространством имен.

Чтобы удалить делегированные обработчики, необходимо указывать параметр selector, в точности совпадающий с таким же параметром, использованным в методе .on() при установке удаляемого теперь обработчика. Если нужно удалить с элементов все делегированные обработчики, не затрагивая обработчики, установленные непосредственно, следует в параметре selector указать специфическое значение — ‘**’ (две звездочки).

Также конкретный обработчик можно удалить, указав имя функции в аргументе handler, но  следует быть осторожным, если при его установке использовалась $.proxy() или подобные механизмы. Это связанно с тем, что для удаления конкретных обработчиков, jQuery сравнивает специфические id функций, которые будут совпадать для функций, созданных с помощью $.proxy(). В связи с этим, с элементов могут быть удалены обработчики, которые вы не планировали удалять. Обезопасить себя от этой проблемы можно с помощью использования пространства имен.

Как и в методе .on() вы можете передавать события как объект, вместо раздельного указания события и обработчика в качестве аргументов. Ключами в таком объекте являются событие, события или пространства имен, а значениями функция-обработчик или специальное значение false.

Пример

С помощью кнопок будем назначать или удалять обработчик события click желтой кнопке. Если обработчик события назначен, то при клике по желтой кнопке будем показывать скрытый блок.

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