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

Обработчики событий - это функции, код которых исполняется только после совершения определенных действий.

Обработчики событий присутствовали и в JavaScript, но jQuery облегчает их использование и расширяет их функциональность.

Примеры действий, после которых выполняются обработчики:

Курсор мыши наведен на элемент;
Веб-страница или картинка полностью загружена;
Изменено содержимое поля формы;
HTML форма отправлена;
Нажата клавиша на клавиатуре;

Общий вид определения обработчиков jQuery:

$(селектор).обработчик_события(function(){код_обработчика_события});

Обработчики событий jQuery в действии

Код обработчика mouseover будет выполнен, когда курсор мыши будет наведен на элемент.

Код обработчика mouseout будет выполнен, когда курсор мыши будет выведен из границ элемента.

Пример

$(document).ready(function(){
  
   $("p").mouseover(function(){$("p").css("color","green")});
   $("p").mouseout(function(){$("p").css("color","black")});

});

Код обработчика click будет выполнен после одинарного щелчка мыши на элементе.

Код обработчика dblclick будет выполнен после двойного щелчка мыши на элементе.

Пример

$(document).ready(function(){

   $("#but1").click(function(){alert("Вы нажали один раз на первую кнопку!");});
   $("#but2").dblclick(function(){alert("Вы нажали два раза на вторую кнопку!");});

});

Код обработчика focus() будет выполнен, когда элемент станет активным.

Код обработчика blur() будет выполнен, когда элемент перестанет быть активным.

Код обработчика change() будет выполнен, при изменении содержимого элемента.

Пример

$(document).ready(function(){

   $("#el1").focus(function(){$(this).attr("value","")});
   $("#el1").blur(function(){$(this).attr("value","Введите ФИО")});
   $("#el2").change(function(){ alert("Содержимое данного элемента было изменено.") });

});

С помощью jQuery Вы можете также вызывать обработчики событий привязанные к элементу.

Например: $('#test').blur() вызовет обработчик blur у элемента с id='test'.

Пример

$(document).ready(function(){
  
// Зададим обработчик события, который будет выводить сообщение при нажатии на кнопку с id=but1
   $("#but1").click(function(){alert("Вы нажали на кнопку с id=but1")});
// Вызовем обработчик click у элемента с id='but1'
   $("#but1").click();

});

Объект event

Объект event содержит информацию о произошедшем событии.

Объект event создается для каждого произошедшего события, но для того, чтобы иметь возможность обращаться к его свойствам и методам его необходимо явно передать в обработчик события.

Синтаксис:

$(селектор).событие(function(event){код_обработчика_события});

После того, как объект event был передан обработчику события, Вы можете обращаться к его свойствам и методам.

В примере ниже с помощью объекта event мы будем выводить координаты, на которых находился курсор мыши во время того, как произошло событие.

Пример

$(document).ready(function(){
  
   $("#square").click(function(event){
      $("#coord").css("display","block");
      $("#x").html(event.pageX);
      $("#y").html(event.pageY);
   });

});

Управление обработчиками событий

Метод jQuery one() позволяет создавать обработчики, которые могут быть вызваны лишь один раз.

Пример

$(document).ready(function(){

   $("#but1").one("click",function(){alert("Вы нажали на кнопку с id=but1")});

});

Метод jQuery toggle() позволяет переключаться между различными обработчиками событий по щелчку мыши.

Пример

$(document).ready(function(){

   $("#but1").click(function(){
      $("#par1").css("color","black");
      $("#par1").css("font-size","1em");
   });
   $("#par1").toggle(function(){
      $("#par1").css("color","green");
      $("#par1").css("font-size","10px");},function(){
      $("#par1").css("color","red");
      $("#par1").css("font-size","20px");},function(){
      $("#par1").css("color","blue");
      $("#par1").css("font-size","30px");},function(){
      $("#par1").css("color","black");
      $("#par1").css("font-size","1em");
   });

});

Следующая лекция