Теперь, когда мы разобрались с назначением и применением элементов JQuery, настало время для изучения некоторых действий (обработка событий). Посредством действий, реакций и взаимодействий мы учимся, общаемся и играем, а Интернет становится неотъемлемой частью нашей жизни.

Однако, задача создания единой совершенной модели взаимодействия, одинаково пригодной для различных браузеров конкурирующих компаний-разработчиков, довольно затруднительна. Кроме того, не стоит забывать о существовании различных моделей событий DOM. Признайте, ведь вам не раз приходилось сталкиваться с проблемой взаимодействия типа «Да/Нет » между вами и пользователем?

Да, все работает.
Нет, не работает. Ничего не происходит.
Каким браузером вы пользуетесь?
…

JQuery предоставляет унифицированную платформу для кросбраузерной модели обработки событий. Кроме того, JQuery позволяет связывать или отключать события от нескольких слушателей событий. Каждое событие (blur, change, click, focus, keydown …) имеет свои свойства, такие как keyCode, pageX, pageY, screenX, screenY, shiftKey, target.

Добавление и удаление обработчика событий: bind() и unbind()

bind(eventType, data, listener)

Таким образом, вместо добавления события нажатия кнопки мыши к изображению, как показано ниже:

<img id="img1" src="arrowup.jpg" onclick ="showMe()"/>

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

$(function(){
 $('img#clickme').bind('click', function(evt){
  alert('Опа! Вы кликнули на меня!');
 };
};

С помощью селекторов JQuery и команды bind() несложно обработать событие выбранного набора элементов.

Теперь немного изменим вышеприведенный код:

$(function(){
 $('img').bind('click', function(evt){
  alert('Мой id='+this.id);
 };
};

В этом примере мы даем команду каждому изображению на странице реагировать на событие нажатия кнопки мыши.

Команда bind() может использоваться для добавления анонимных обработчиков к одному событию. А теперь снова рассмотрим наш пример и внесем в него некоторые изменения:

$('img').bind('click', function(event) {
 alert('Мой id='+this.id);
}).bind('click', function(event) {
 alert('Мой источник '+this.src);
}).bind('click', function(event) {
 alert('Мой положение '+event.pageX+' '+event.pageY );
});
});

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

unbind(eventType, listener)
unbind(event)

Прямое использование названий событий и запуск обработчиков событий: eventName() и trigger()

Для большинства часто используемых событий существует множество удобных, продвинутых обработчиков. Для таких часто встречающихся событий как click, focus, select, submit, blur можно опустить команду bind() и напрямую, непосредственно использовать обработчики.

Синтаксис выглядит следующим образом: eventName(listener), например, click ( function () { } ) ;
или же просто eventName(), как, например, click ();

Пример:

$('img').click(function(event) { alert('My id = ' + this.id);});
$('img#clickMe').click() // имитация нажатия на изображение с id = clickMe

trigger(eventType)

Порой возникает необходимость не просто обработать, а сгенерировать событие. Например, иногда нужно инициировать событие отправки формы. Как это сделать? Просто используйте функцию trigger.

//…
trigger(‘submit’);

Сгенерировать такое событие можно внутри обработчика другого события.

$('img#clickme').click(function(event){
 $('img#submit').trigger('submit');
})

$('img#submit').submit(function(){
 alert('Всё ок!');
});

Последовательная обработка событий: toggle(handler1, handler2, handler3, …)

Главное преимущество, которое предоставляет JQuery — удобство. Если существуют какие-то рутинные действия, то обязательно найдется функция, которая поможет их упростить. Так, например, обстоит дело с последовательной обработкой событий. Как видно из синтаксиса метода toggle(), вы можете переключаться между множеством обработчиков событий.

С помощью этого переключения удобно настраивать стили заданного набора элементов. Сначала задаем синий цвет; затем меняем не зеленый; потом на красный… пока снова не вернемся к синему. И так вновь и вновь.

$('img#chmeleon').toggle(
 function(event){
  alert('Меняем на красный');
  $(event.target).css('background-color: red');
 },
 function(event){
  alert('Меняем на зеленый');
  $(event.target).css('background-color: green');
 }
}
);

Наведение курсора: hover(mouseoverhandler, mouseouthanlder)

Метод hover() - еще один пример удобной для использования команды. Всем нам нравится наблюдать как ссылки и картинки меняют свои стили и отображение при наведении курсора. Ранее с этой целью использовались команды mouseover() и mouseout(). Теперь же, используя JQuery, можно просто вызвать команду hover().

$('img#star').hover(
 function() {
  $(this).attr(src, 'star.jpg');
 },
 function() {
  $(this).attr(src, 'star.gif');
  }
);

Популярность: 97%