Код jQuery может исполняться после определенных действий пользователя.

Обработчики событий 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();

});

Обратите внимание: полный список всех существующих событий в jQuery с примерами использования Вы найдете в нашем jQuery справочнике.

Объект 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);
   });

});

Обратите внимание: полный список всех существующих свойств и методов объекта event с примерами использования Вы найдете в нашем jQuery справочнике.

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

Метод 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");
   });

});

Обратите внимание: полный список всех существующих функций для управления обработчиками событий с примерами использования Вы найдете в нашем jQuery справочнике.

Сделайте сами

Задание 1 реализуйте подпункты перечисленные ниже путем добавления на страницу соответствующего jQuery кода (для выполнения некоторых подпунктов необходимо обратиться к справочнику):

1. После одинарного нажатия на кнопку с id='but1' цвет текста абзаца с id='par1' должен изменится на зеленый, а размер его шрифта должен стать равным 20px.
2. При наведении указателя мыши на ссылку ее цвет должен измениться на оранжевый. При выведении указателя мыши за ее пределы оформление должно сбросится на стандартное.
3. При выделении текста элемента цвет текста должен измениться на красный, а размер шрифта должен стать равным 20px.
4. При каждом щелчке по кнопке с id=but2 оформление абзаца с id=par2 должно меняться следующим образом:
   • Текст должен быть отображен шрифтом Times New Roman красного цвета;
   • Текст должен быть отображен шрифтом Arial синего цвета;
   • Текст должен быть отображен жирным шрифтом Verdana, с рамкой толщиной 1 пиксель (используйте свойство font-weight:bold для того, чтобы сделать текст жирным и свойство border-style для задания толщины границы).

$(document).ready(function(){
  
//Пишите код здесь

});