Працюємо з подіями в jquery

Даний урок не є повноцінним керівництвом, але він включає в себе основи, які потрібні при написанні більшості скриптів. Для реалізації ваших ідей вам може знадобитися повний список методів подій jQuery.

В даному уроці будуть розкриті наступні теми:

• Що таке подія?
• Робота з подіями
• Простий обробник події
• Короткі методи для зв'язування загальних подій
• Доступ до елементів з обробника події
• Отримати додаткову інформацію про подію
• Зупинка дій за замовчуванням і поширення подій
• Скидання обробника події
• Примусова генерація події

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

click Генерується, коли користувач натискає на елементі кнопку миші dblclick Генерується, коли користувач робить подвійне клацання кнопкою миші на елементі mouseover Генерується, коли користувач переміщує курсор миші на елемент load Генерується після того, як елемент, наприклад, зображення, повністю завантажений submit Генерується, коли відбувається відправка форми (дана подія генерується тільки для елементів form)

Працюємо з подіями

Для роботи з подіями в jQuery потрібно створити функцію, звану обробником події. яка буде працювати з подією, коли воно відбудеться. Потім викликається метод jQuery bind. який прив'язує функцію обробник події до певної події для вибраного елемента (або елементів).

Існує багато методів jQuery для прив'язки подій до обробникам, але метод bind () є основним. Він приймає ім'я події і ім'я функції як аргументи і прив'язує обробник до події для вибраного елемента (або елементів):

Потім, коли відбувається подія, ваша функція-обробник автоматично запускається і подія обробляється так, як потрібно.

простий приклад

Наступний приклад показує, як створити простий обробник події і прив'язати його до події click кнопки форми:

Якщо натиснути на кнопку на сторінці, буде виведено вікно повідомлення з написом "Усім - привіт!".

Короткі методи для зв'язування загальних подій

Для полегшення життя jQuery має багато коротких методів для зв'язування часто використовуваних подій з функціямі- обработчиками. Ось деякі з них:

click (functionName) Еквівалентно викликом bind ( 'click', functionName) dblclick (functionName) Еквівалентно викликом bind ( 'dblclick', functionName) load (functionName) Еквівалентно викликом bind ( 'load', functionName)

Наприклад, ви можете переписати виклик методу bind () у вище наведеному прикладі таким чином:

Доступ до елементів з обробника подій

Коли подія викликає функцію-обробник, ви можете отримати доступ до елементу як до об'єкта DOM з функції-обробника за допомогою ключового слова this. Це означає, що ви можете отримати більше інформації про елемент, для якого згенеровано подія, можете маніпулювати даними елементом і так далі.

Наступний приклад створює пульсації кнопки (плавно загасає і плавно висвічується знову) при натисканні на неї. Щоб виконати поставлене завдання, обробник події отримує доступ до об'єкту утримуючи кнопки за допомогою this. обертає його об'єктом jQuery, а потім викликає методи jQuery fadeOut () і fadeIn () для організації пульсування кнопки:

Отримати додаткову інформацію про подію

Часто ваш обробник не потребує додаткових відомостях про подію, яка його запустило. Але якщо потрібно більше деталей про елементі, який згенерував подія, можна використовувати ключове слово this як вже було описано раніше. Однак, jQuery може забезпечити вас великою кількістю інформації про подію, якщо в цьому є необхідність.

Щоб отримати більше відомостей про подію, ваш обробник повинен приймати об'єкт jQuery event як аргумент. В такому випадку обробник події може отримати доступ до додаткової інформації за допомогою різних методів і властивостей даного об'єкта.

Наступний приклад не тільки виводить повідомлення, коли натиснута кнопка, але і вказує точну дату і час, коли відбулася подія, а також виводить координати X і Y покажчика миші в цей час:

Вище наведений скрипт використовує три властивості 3 об'єкти event.

timeStamp Час, коли відбулася подія pageX Координата X покажчика миші в момент натискання на кнопку, по відношенню до лівого верхнього кута документа pageY Координата Y покажчика миші в момент натискання на кнопку, по відношенню до лівого верхнього кута документа

Ви можете знайти додаткові відомості про об'єкт event. включаючи всі його властивості та методи. в документації jQuery (на жаль, поки в мережі немає повноцінного перекладу на українську мову даного розділу, частково російською мовою можна знайти інформацію тут).

Зупинка дій за замовчуванням і поширення подій

• Дії за замовчуванням. багато подій мають дії за умовчанням. Наприклад, якщо користувач натисне на посилання, то за замовчуванням подія click для посилання відкриває посилання.
• Поширення подій. Також відомо як «спливання» події, відбувається тоді, коли ви прив'язуєте обробник до одного і того ж події для елемента і його батька. Наприклад, ви прив'язуєте обробник до події click для посилання, і прив'язуєте інший обробник до події click для параграфа, який містить посилання. Коли користувач натискає посилання, обробник події click посилання запускається першим, а потім подія "спливає" до батьківського параграфу, викликаючи спрацьовування його обробника події click.

Часто потрібно запобігати запуск дій за замовчуванням і / або поширення подій. Наприклад, якщо встановлено обробник події click для посилання, який потрібен для перевірки правильності заповнення форми перед тим як покинути сторінку, то потрібно запобігти переходу за посиланням, який виконується за замовчуванням.

Або якщо для батьківського елемента і його нащадків встановлені однакові обробники події click може знадобитися запобігти запуск всіх функцій в одне і теж час.

Об'єкт jQuery event дає вам пару методів для того, щоб зупинити таку поведінку програми:

preventDefault () Зупиняє виконання дій за замовчуванням stopPropagation () Зупиняє «спливання» події до батьківського елементу

Наступний приклад відкриває посилання в новому вікні, коли на неї натискають, і використовує метод preventDefault () щоб зупинити відкриття посилання в поточному вікні:

Ви також можете зупинити дію за замовчуванням і поширення події просто повернувши false з обробника події.

Скидання обробника події

Якщо ви хочете видалити обробник події з елемента, викличте метод unbind (). Для видалення всіх обробників події:

Для видалення обробника заданого події:

Примусова генерація події

Іноді потрібно запускати події для елементів прямо з коду. Наприклад, потрібно відправити форму автоматично, коли користувач натисне на посилання.

Метод jQuery trigger () генерує певний подія для обраного елемента (або елементів). Ім'я події потрібно передати trigger () в тригер в якості аргументу.

У прикладі відбувається відправка форми, коли користувач натискає на посилання на сторінці:

Ви також можете згенерувати подія за допомогою тих же коротких методів, які використовувалися для прив'язки подій (вони описані вище в нашому уроці). Просто викличте короткий метод без будь-яких аргументів. наприклад:

В даному уроці ми розглянули, як працювати з подіями в jQuery:

• Що таке подія?
• Робота з подіями
• Простий обробник події
• Короткі методи для зв'язування загальних подій
• Доступ до елементів з обробника події
• Отримати додаткову інформацію про подію
• Зупинка дій за замовчуванням і поширення подій
• Скидання обробника події
• Примусова генерація події

Події є дуже потужним і корисним інструментом, а в jQuery багато зроблено для того, щоб полегшити роботу з ними.

5 останніх уроків рубрики "jQuery"

Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.

jQuery плагін для створення тимчасової шкали.

jQuery плагін для створення діаграми Ганта.

Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.

postaltomsk

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!