Урок - Метод jQuery.bind() - назначение обработчиков событий для элементов.

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

Метод jQuery.bind() прикрепляет обработчик события для элементов текущего набора элементов.

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

Метод jQuery.bind() доступен в нескольких вариантах:

  • jQuery.bind(eventType, [eventData ,] handler(eventObject))
  • jQuery.bind(eventType, [eventData ,] preventBublble)
  • jQuery.bind(events)

где

  • eventType - строка, содержит один или несколько DOM типов событий, такие как 'click', 'submit' или пользовательский тип.
  • eventData - объект, содержащий данные для передачи в обработчик события.
  • handler(eventObject) - функция, вызваемая каждый раз при возникновении события указанного в eventType.
  • preventBublble - логическое значение, по умолчанию true. Если аргумент выставить в false, то будет запрещено выполнени обработчика по умолчанию.
  • events - объект, содержит один или несколько DOM типов событий и функций для выполнения.

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

Начиная с версии jQuery 1.7 метод jQuery.on() является предпочтительным методом, для присоединения обработчиков событий к документу. Для более ранних версий jQuery метод jQuery.bind() используется для назначения обработчиков событий непосредственно к элементам. Обработчики назначаются выбранным элементам в jQuery-объекте в момент вызова метода jQuery.bind(), по этому элементы должны существовать на момент вызова jQuery.bind(). Для более гибкого назначения событий обратитесь к методам jQuery.on() или jQuery.delegate().

Любое название типа события (eventType) является допустимым. Если строка не соответствует ни одному из имен DOM событий, то обработчик привязывается к пользовательскому событию. Пользовательские события никогда не вызываются браузером, но могут быть запущены с помощью jQuery.trigger() или jQuery.triggerHandler().

Если в строке типа события (eventType) содержится символ точка (.), то для события указывается пространство имен. До символа точки указывается название типа события, а после символа точки указывается пространство имен. Например:

jQuery.bind('click.name', ...)

где

  • click - тип события
  • name - пространство имен

Пространство имен позволяет снять или вызвать некоторые события не затрагивая другие. Смотрите обсуждение метода jQuery.unbind() для дополнительной информации.

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

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

Обычно использование меотда jQuery.bind() сводится к следующему коду:

jQuery('#foo').bind('click', function() {
    alert('Пользователь кликнул по элементу "foo."');
});

В этом примере, элементу с id="foo" будет назначен обработчик щелчка по элементу. Когда пользователь щелкнет по элементу - появится сообщение.

Назначение нескольких событий.

Обработчик может быть назначен сразу нескольким событиям, которые должны быть указаны через пробел.

jQuery('#foo').bind('mouseenter mouseleave', function() {
    jQuery(this).toggleClass('entered');
});

В этом примере элементу с id="foo" назначается один обработчик для двух событий. Обработчик меняет наличие CSS-класса для элемента.

Для версии jQuery 1.4 можно использовать принцип назначения обработчиков через объект:

jQuery('#foo').bind({
    mouseenter: function() {
        jQuery(this).addClass('entered');
    },
    mouseleave: function() {
        jQuery(this).removeClass('entered');
    }
});

или

jQuery('#foo').bind({
    mouseenter: function() {
        jQuery(this).toggleClass('entered');
    },
    mouseleave: function() {
        jQuery(this).toggleClass('entered');
    }
});

Обработчики событий.

Аргумент обработчик события является функцией обратного вызова, как показано выше. В обработчике ключевое слово this относится к DOM-элементу, которому назначен обработчик. Получить доступ к jQuery-объекту элемента this можно с помощью команды JQuery(this):

jQuery('#foo').bind('click', function() {
    alert(jQuery(this).text());
});

Начиная с версии jQuery 1.4.2 для события может быть назначено несколько обработчиков, вместо перезапеси предыдущего.

Начиная с версии jQuery 1.4.3 можно указать в качестве аргумента обработчика false:

jQuery('#foo').bind('click', false);

Что аналогично следующему коду:

jQuery('#foo').bind('click', function() {
    return false;
});

Такой обработчик может быть удален позднее с помощью метода jQuery.unbind():

jQuery('#foo').unbind('click', false);

Event-объект.

В функцию обратного вызова также можно передавать данные. При вызове обработчика события объект события (Event-объект) передается первым параметром.

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

Возвращая в обработчике события false эквивалентно вызову .preventDefault() и .stopPropagation() для объекта события (Event-объекта).

Использование объекта события (Event-объекта) в обработчике выглядит следующим образом:

jQuery('#foo').bind('click', function(event) {
    alert('Позиция курсора (' + event.pageX + ';' + event.pageY + ')');
});

Обратите внимание, что параметры передаются в анонимную функцию. Этот пример указывает вывести сообщение с информацие о координатах расположения мыши в момент клика.

Передача данных в обработчки события.

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

var message = 'Утро настало';
jQuery('#foo').bind('click', function() {
    alert(message);
});
message = 'День чудес';
jQuery('#bar').bind('click', function() {
    alert(message);
});

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

var message = 'Утро настало';
$('#foo').bind('click', {msg: message}, function(event) {
    alert(event.data.msg);
});
message = 'День чудес';
$('#bar').bind('click', {msg: message}, function(event) {
    alert(event.data.msg);
});

На этот раз переменная message не передается в обработчики, а передается по значению в параметр eventData, который фиксирует значение на момент назначения события.

Обратите внимание, что объекты передаются по ссылке, что несколько усложняет скрипт.

Если параметр eventData присутствует, он должен быть вторым аргументом в методе jQuery.bind(); если дополнительные данные не передаются, то в функцию обратного вызова будет передан второй и последний аргумент.

Смотрите описание метода jQuery.trigger() для передачи данных в обработчик во время наступления события, а не во время назначения обработчика.

С версии jQuery 1.4 мы не может прикреплять данные (и события) для DOM-элементов <object>, <embed> и <applet>, т.к. возникают критические ошибки Java-апплетов.

Примечание:

В следующем примере приводится работа с событиями click и dblclick для одного и того же элемента. С одной стороны это без смысленно, но проверяя пример на различных системах вы заметите, что меняется ход выполнения обработчиков при двойном клике, а также количество одиночных кликов. Чувствительность двойного клика (максимальное время между двумя одиночными кликами) различная на разных системах и бразурах и часто может быть настроена пользователем отдельно.

Примеры

Пример 1: Назначение обработчиков для событий click И dblclick для элемента <p>.

<!DOCTYPE html>
<html>
<head>
    <style>
        p { color:red; }
        span { color:blue; }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <p>Присоединено пользовательское событие.</p>
    <button>Выполнить пользовательское событие</button>
    <span style="display:none;"></span>
    <script>
        jQuery("p").bind("myCustomEvent", function(e, myName, myValue){
            jQuery(this).text(myName + ", hi there!");
            jQuery("span").stop().css("opacity", 1)
                .text("myName = " + myName)
                .fadeIn(30).fadeOut(1000)
            ;
        });
        jQuery("button").click(function () {
            jQuery("p").trigger("myCustomEvent", [ "John" ]);
        });
    </script>
</body>
</html>

Пример 2: Отобразить текстовое содержимое параграфа во всплывающем окне при клике.

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

Пример 3: Передача дополнительных параметров в обработчик в момент назначения обработчика события.

function handler(event) {
    alert(event.data.foo);
}
jQuery("p").bind("click", {foo: "bar"}, handler)

Пример 4: Отмена события по умолчанию и запрет его "всплытия".

jQuery("form").bind("submit", function() { return false; })

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

jQuery("form").bind("submit", function(event) {
    event.preventDefault();
});

Пример 6: Остановить всплытие события без запрета события по умолчанию.

jQuery("form").bind("submit", function(event) {
    event.stopPropagation();
});

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

<!DOCTYPE html>
<html>
<head>
    <style>
        p { color:red; }
        span { color:blue; }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <p>Присоединено пользовательское событие.</p>
    <button>Выполнить пользовательское событие</button>
    <span style="display:none;"></span>
    <script>
        jQuery("p").bind("myCustomEvent", function(e, myName, myValue){
            jQuery(this).text(myName + ", hi there!");
            jQuery("span").stop().css("opacity", 1)
                .text("myName = " + myName)
                .fadeIn(30).fadeOut(1000)
            ;
        });
        jQuery("button").click(function () {
            jQuery("p").trigger("myCustomEvent", [ "John" ]);
        });
    </script>
</body>
</html>

Пример 8: Назначение нескольких событий одновременно.

jQuery("#test").bind({
    click: function(){
        jQuery(this).addClass("active");
    },
    mouseenter: function(){
        jQuery(this).addClass("inside");
    },
    mouseleave: function(){
        jQuery(this).removeClass("inside");
    }
});