Обробка подій - ще одна з тих великих причин використання jQuery. Існують деякі різниці між браузерами в тому, як це зробити, що jQuery нормалізує в один простий API, одночасно застосовуючи деякі найкращі практики.
По суті, є один метод, який потрібно знати: .on()- він працює так:
$("button").on("click", function() ( // do something ));Тут ми наводимо .on()методу лише два параметри. Назва події (“клацання”) та функція, яка запускається, коли ця подія відбувається на будь-якому з елементів у цьому виділенні. Читає досить чисто, чи не так?
Люди з деяким попереднім досвідом JQuery можуть бути знайомі з іншими способами зв'язування подобаються .bind(), .live()або .delegate(). Більше не турбуйтеся про них, сучасний jQuery об’єднав їх усі, .on()що завжди робить найкращі практики.
Під час прив’язки події, як це було зроблено вище, ви можете (і, як правило, це розумно) включати ім’я параметра у функцію. Цей параметр буде "об'єктом події" всередині функції:
$("button").on("click", function(event) ( // event => "the event object" ));Через цей об'єкт події ви отримуєте багато інформації. Ви вже трохи знайомі з цим, тому що ми звикли .preventDefault()і .stopPropagation(). Але в цьому об’єкті є також багато іншої прямої інформації. Такі речі, як про тип події (якщо багато подій запускають цю саму функцію), коли це сталося, де це відбулося (координати, якщо це можливо), на якому елементі це сталося та багато іншого. Під час кодування варто регулярно перевіряти об’єкт події.
Існує концепція делегування подій, що надзвичайно важлива у роботі з подіями. Це дуже розумна сучасна найкраща практика. Він включає ідею сфери дії.
Традиційний спосіб думати про прив'язку подій - це "знайти всі кнопки на сторінці та прив'язати до них подію кліку". Це, звичайно, працює, але це:
- Не дуже ефективно
- Тендітна
Неефективно, тому що ви негайно змушуєте JavaScript знаходити всі ці елементи кнопок, коли при делегуванні ви можете просто знайти один простіший для пошуку елемент.
Тендітний, тому що якщо на сторінку буде додано більше кнопок, вони вже пропустили судно на палітурці і їх потрібно буде перев’язати.
З делегуванням події ви би прив’язали цю подію кліка до елемента, який знаходиться вище дерева DOM, ніж кнопки, які містять усі. Може бути десь, може бути саме documentсобою. Коли ви прив'язуєте подію кліка до цього елемента, що знаходиться вгорі, ви повідомляєте, що вас все ще цікавлять лише кліки, які відбулися на кнопках. Потім, коли натискається кнопка, через характер подій, що спливають, цей клік зрештою спрацьовує на вищий елемент. Але об’єкт події буде знати, чи стався вихідний клік на кнопці чи ні, і функція, яку ви встановили для активації цієї події, буде або запускатися, або не запускатись, знаючи цю інформацію.
У цьому скрінкасті ми демонструємо це так:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));А тепер уявіть, якби ми додали ще одну до цього . Нам не потрібно повторно прив’язувати будь-які події, оскільки подія все ще щасливо пов’язана з обсягом, і події все одно спливуть із нещодавно доданого тексту. Це особливо корисно в середовищах веб-додатків, де ви регулярно додаєте нові елементи на сторінку.
Ще одна корисна річ, яку слід знати про прив’язку подій jQuery, полягає в тому, що вони не взаємовиключні. Якщо ви додасте ще один обробник клацання до того самого елемента, який уже має, він просто додасть ще один. Ви не перезаписуєте попередній. jQuery просто обробляє це досить витончено для вас. Ви завжди можете відв’язати їх, якщо ви дійсно хотіли замінити раніше зв’язану функцію.
Якщо це та сама точна подія, варто знати, що для того, щоб розв’язати певну з них, а не іншу, вам потрібно буде простору імен події. Це відбувається за допомогою крапки в назві події, наприклад click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), як ми не згадували раніше, це те, як ви розв’язуєте події.
Існує багато можливих подій DOM. Клацання - це головне, очевидне, але є подвійне клацання, введення миші та залишення миші, клавіатура та клавіатура, конкретні форми, такі як розмиття та зміна, і багато іншого. Якщо вас цікавить повний список, ви можете отримати такий.
Ви можете прив’язати кілька подій одночасно так:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Існують деякі обставини, коли ви чекаєте, що подія відбудеться, але як тільки це станеться, ви більше не дбаєте про це або явно не хочете запускати функцію, яку ви вже зв’язали. Ось у чому .one()полягає функція. Стандартним варіантом використання є кнопка надсилання форми (якщо ви працюєте з Ajax чи іншим способом). Ймовірно, ви хочете по суті вимкнути цю кнопку надсилання після того, як вони натиснуть її, поки ви не зможете обробити цю інформацію та надіслати їм відповідний відгук. Звичайно, це не єдиний приклад використання, але майте це на увазі. .one()== лише один раз.