Урок - Метод jQuery.delegate() - назначение обработчиков сейчас и на будущее.

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

Метод jQuery.delegate() назначет обработчики для одного или нескольких событий, для всех элементов, которые соответствуют селектору, в настоящий момент и на будущее, основываясь на определенном наборе корневых элементов.

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

  • jQuery(...).delegate(selector, eventType, handler)
  • jQuery(...).delegate(selector, eventType, eventData, handler)
  • jQuery(...).delegate(selector, events)

где

  • selector - строка, селектор для фильтрации элементов, для которых назначается события
  • eventType - строка, содержащая список назначаемых JavaScript-событий, разделенные пробелом.
  • handler - функция, обработчик вызываемый в момент возникновения события.
  • eventData - объект, содержащий данные, для отправки в обработчик в момент возникновения события.
  • events - массив, представляющий список событий и их обработчиков.

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

С версии jQuery 1.7 метод jQuery.delegate() заменен на метод jQuery.on(). Для более ранних версий он остается самым эффективным средством для использования назначения обработчиков. Для более подробной информации смотрите документацию по методу jQuery.on(). Примеры ниже эквивалентны:

// jQuery 1.4.3+
$(elements).delegate( selector, events, data, handler );
// jQuery 1.7+
$(elements).on( events, selector, data, handler );

Для примера, следующий пример работы метода jQuery.delegate():

jQuery("table").delegate("td", "click", function() {
    jQuery(this).toggleClass("chosen");
});

равен следующему коду с использованием jQuery.on():

jQuery("table").on("click", "td", function() {
    jQuery(this).toggleClass("chosen");
});

Для удаления событий назначенных методом jQuery.delegate() смотрите метод jQuery.undelegate().

Передача и обработка данных событий происходит аналогично как это делает jQuery.on().

Дополнительное примечание:

Поскольку обработчкики назначенные jQuery.live() при возникновении собятия распространяются на верхней части документа, это распространение не возможно остановить. Но обработчики назначенные jQuery.delegate() будут выполняться с элемента к которым они назначены; обработчик события назначенный на любом элементе ниже в DOM-дереву уже будет выполнен к тому времени, когда будет выполнен назначенный обработчик события на верху. Эти обработчики, следовательно, могут предотвратить выполнение делегированного обработчика от запуска вызывая event.stopPropagation() или возвращая ложный результат (return false;).

Примеры.

Пример 1: Клип по элементу <p> (параграф) приведет к добавлению нового параграфа. Обратите внимание, что что обработчик назначенный с помощью jQuery.delegate() будет работать даже для вновь созданных элементов.

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <style>
        p { background:yellow; font-weight:bold; cursor:pointer;
        padding:5px; }
        p.over { background: #ccc; }
        span { color:red; }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script>
        jQuery(function(){
            jQuery("body").delegate("p", "click", function(){
                jQuery(this).after("<p>Another paragraph!</p>");
            });
        });
    </script>
</head>
<body>
    <p>Click me!</p>
    <span></span>
</body>
</html>

Пример 2: При клике на параграфе его текст будет отображен в окне сообщения.

jQuery("body").delegate("p", "click", function(){
    alert( jQuery(this).text() );
});

Пример 3: Для отмены действия по умолчанию и не дорпустить всплытия события - возвращаем ложный результат.

jQuery("body").delegate("a", "click", function() {
    return false;
})

Пример 4: Отменяем действие по умолчанию с помощью метода event.preventDefault().

jQuery("body").delegate("a", "click", function(event){
    event.preventDefault();
});

Пример 5: Назначаем пользовательское событие.

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <style>
        p { color:red; }
        span { color:blue; }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script>
        jQuery(function(){
            jQuery("body").delegate("p", "myCustomEvent", function(e, myName, myValue) {
                jQuery(this).text("Hi there!");
                jQuery("span").stop().css("opacity", 1)
                    .text("myName = " + myName)
                    .fadeIn(30).fadeOut(1000)
                ;
            });
            jQuery("button").click(function () {
                jQuery("p").trigger("myCustomEvent", 'Юлик');
            });
        });
    </script>
</head>
<body>
    <p>Пользовательское событие назначео.</p>
    <button>Вызвать пользовательское собыите</button>
    <span style="display:none;"></span>
</body>
</html>