jQuery Методи подій

jQuery спеціально розроблено для реагування на події на сторінці HTML.

Що таке події?

Усі різні дії відвідувачів, на які може реагувати вебсторінка, називаються подіями.

Подія представляє точний момент, коли щось відбувається.

Приклади:

переміщення миші над елементом
вибір перемикача
клацання елемента

Термін "спрацьовує/запускається" часто використовується з подіями. Приклад: "Подія натискання клавіші запускається в момент, коли ви натискаєте клавішу".

Ось деякі типові події DOM:

Події миші	Події клавіатури	Події форми	Події документа/вікна
клік	натискання клавіші	надсилання	завантаження
подвійний клік	клавіша вниз	змінити	змінити розмір
введення миші	клавіша	фокус	прокручування
залишити мишу		розмиття	розвантажити

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

У jQuery більшість подій DOM мають еквівалентний метод jQuery.

Щоб призначити подію клацання всім параграфам на сторінці, ви можете зробити це:

$("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("Наведіть мишку на 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", "#fff");
});

Спробуйте самі »

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

Спробуйте самі »

jQuery Вправи