События в jQuery

В jQuery реализован свой механизм реагирования на события, возникающие на HTML странице.

Что такое события?

Все действия посетителей, на которые веб-страница может реагировать тем или иным способом, называются событиями.

Событие представляет тот самый момент, когда что-то происходит.

Например:

• передвижение курсора через элемент
• выбор радио кнопки
• нажатие на элемент

Обычно по отношению к событию говорят, что оно возникло.

В следующей таблице приведены некоторые общие события DOM:

Синтаксис jQuery для методов событий

В jQuery у большинства событий DOM есть эквивалентные методы jQuery.

Например, чтобы установить событие click (нажатие кнопки мыши) всем параграфам на странице, можно сделать следующее:

$("p").click(); 

Следующий шаг — это определить, что будет происходить, когда событие возникнет. Для этого нужно передать в событие функцию:

$("p").click(function(){
  // здесь идет реакция на событие!!
}); 

Часто используемые методы событий jQuery

$(document).ready()

Метод $(document).ready() позволяет выполнять функцию, когда документ полностью загружен. Об этом событии рассказывалось в главе Синтаксис jQuery.

click()

Метод click() присоединяет функцию обработчика события к элементу HTML, которая выполняется, когда пользователь "кликает" мышкой на элемент HTML.

В следующем примере, когда возникает событие "нажатие кнопки мыши" на элементе <p>, элемент <p> скрывается:

$("p").click(function(){
  $(this).hide();
}); 

dblclick()

Метод dblclick() присоединяет функцию обработчика события к элементу HTML, которая выполняется, когда пользователь совершает двойное нажатие мышкой на элемент HTML:

$("p").dblclick(function(){
   $(this).hide();
}); 

mouseenter()

Метод mouseenter() присоединяет функцию обработчика события к элементу HTML, которая выполняется, когда указатель мыши заходит на элемент HTML:

$("#p1").mouseenter(function(){
   alert("Вы зашли на элемент p1!");
}); 

mouseleave()

Метод mouseleave() присоединяет функцию обработчика события к элементу HTML, которая выполняется, когда указатель мыши выходит за границы элемента HTML:

$("#p1").mouseleave(function(){
   alert("Пока! Вы покидаете элемент p1!");
});

mousedown()

Метод mousedown() присоединяет функцию обработчика события к элементу HTML, которая выполняется, когда нажата любая из стандартных клавиш мыши (левая, средняя или правая) на элементе HTML:

$("#p1").mousedown(function(){
  alert("Кнопка мыши нажата на p1!");
}); 

mouseup()

Метод mouseup() присоединяет функцию обработчика события к элементу HTML, которая выполняется, когда отпущена любая из стандартных клавиш мыши (левая, средняя или правая) на элементе HTML:

$("#p1").mouseup(function(){
   alert("Mouse up over p1!");
}); 

hover()

Метод hover() в параметрах принимает две функции и по сути является комбинацией методов mouseenter() и mouseleave().

Первая функция выполняется, когда указатель мыши заходит на элемент HTML, а вторая, когда указатель мыши покидает границы элемента HTML:

$("#p1").hover(function(){
  alert("Вы заходите на элемент p1!");
},
function(){
  alert("Пока! Вы покидаете элемент p1!");
}); 

focus()

Метод focus() присоединяет функцию обработчика события к полю HTML формы. Функция выполняется, когда поле формы получает фокус:

$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
}); 

blur()

Метод blur() присоединяет функцию обработчика события к полю HTML формы. Функция выполняется, когда поле формы теряет фокус:

$("input").blur(function(){
  $(this).css("background-color", "#ffffff");
}); 

Метод on()

Метод on() присоединяет один или несколько обработчиков событий к выбранному элементу.

Присоединяем событие "нажатие кнопки мыши" к элементу <p>:

$("p").on("click", function(){
  $(this).hide();
}); 

Присоединяем несколько событий к элементу <p>:

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  }, 
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  }, 
  click: function(){
    $(this).css("background-color", "yellow");
   } 
});