Урок - Метод jQuery.off() - удаление обработчиков событий.

Главная » Курсы » Курс jQuery, Быстрый старт. (jQuery 1.10.2 / jQuery 2.0.3) » Урок - Метод jQuery.off() - удаление обработчиков событий.
Группа вКонтакте
Лицензия: Лицензия Creative Commons.

Метод jQuery.off() позволяет удалить обработчик для события.

Синтаксис метода jQuery.off().

  • jQuery.off( events [, selector ] [, handler(eventObject) ] )
  • jQuery.off( eventsList [, selector ] )

где

  • events - строка, один или более (разделенные пробелом) типов событий и/или пространство имен. Например: "click", "click.myPlugin", ".myPlugin".
  • selector - строка, селектор, который должен совпадать с селектором переданным в метод jQuery.on() при назначении обработчика.
  • handler(eventObject) - функция, обработчик назначенный ранее для события(-ий) или константа false имеющая особое значение.
  • eventsList - объект, где строковый ключ представляет один или более разделенных пробелом типов событий и/или пространство имен, а значение объекта представляет  обработчики ранее назначенные событию(-ям).

Описание метода jQuery.off().

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

Если простое событие, такое как click, предусмотрено, то все события этого типа (как прямые так и делегированные) удаляются из набора элементов jQuery. При написани кода, который будет использоваться в качестве плагина, или просто при работе с большой базой кода, то оптимальной практикой является назначение и удаление обработчиков событий с помощью пространства имен, таким образом сторонние обработчики не будут затронуты. Все события всех типов в определенном пространстве могут быть удалены из элемента, только для указанного пространства имен, таких как ".myPlugin". Как минимум должно быть указано пространство имен или название события.

Чтобы удалить определенный назначенный обработчик события необходимо указать аргумент selector. Selecctor - строка должна точно совпадать с тем селектором, который был передан в метод jQuery.on() в момент назначения обработчика. Для удаления всех делегированных обработчиков из элементов, исключая не делегированные обработчики - используйте специальное значение "**" (две звездочки).

Также обработчик можно удалить указав имя функции в аргументе handler. Когда jQuery назначает обработчик события он присваивает уникальный номер функции обработчика. Прокси-обработчики от метода jQuery.proxy() или аналогичного механизма будут иметь тот же уникальный номер (прокси-функция), поэтому проходя прокси обработчики метод jQuery.off() может удалить больше обработчиков, чем предполагалось. В таких случаях лучше назначать и удалять обработчики используя пространства имен.

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

Примеры использования метода jQuery.off():

Пример 1: Добавляем и удаляем обработчик события для цветной кнопки.

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <script src="http://code.jquery.com/jquery-1.10.1.js"></script>
    <style>
        button { margin:5px; }
        button#theone { color:red; background:yellow; }
    </style>
    <script>
        jQuery(function(){
            //    функция для назначения обработчика и снятия.
            function aClick() {
                jQuery("div")
                    .show()
                    .fadeOut("slow")
                ;
            }
            //    назначаем обработчик
            jQuery("#bind").click(function () {
                jQuery("body")
                    .on("click", "#theone", aClick)
                    .find("#theone")
                    .text("Можно Нажать!")
                ;
            });
            //    снимаем обработчик
            jQuery("#unbind").click(function () {
                jQuery("body")
                    .off("click", "#theone", aClick)
                    .find("#theone")
                    .text("Ничего")
                ;
            });
        });
    </script>
</head>
<body>
    <button id="theone">Ничего</button>
    <button id="bind">Добавить обработчик Click</button>
    <button id="unbind">Убрать обработчик Click</button>
    <div style="display:none;">Click!</div>
</body>
</html>

Пример 2: Удаляем все обработчики событий у всех элементов <p>.

jQuery("p").off();

Пример 3: Удаляем все делегированные обработчики для события click у всех элементов <p>.

jQuery("p").off( "click", "**" );

Пример 4: Удаляем только один ранее назначенный обработчик, передав его в качестве третьего аргумента.

var foo = function () {
    // код обработчика какого-то события
};
// назначаем обработчик для события click по элементу <p>
jQuery("body").on("click", "p", foo);
// снимаем обработчик, теперь функция foo() не будет вызываться.
jQuery("body").off("click", "p", foo);

Пример 5: Отвязываем все делегированные обработчики событий по пространству имени.

var validate = function () {
    // код проверки данных формы
};
// делегируем события в пространстве имен ".validator"
jQuery("form").on("click.validator", "button", validate);
jQuery("form").on("keypress.validator", "input[type='text']", validate);
// удаляем обработчики события пространства имен ".validator"
jQuery("form").off(".validator");