Перш ніж приступити до прочитання даної статті, варто визначитися, що з себе представляють події — для web-сторінки, подіями будуть будь-які дії користувача – це і введення даних з клавіатури, і пересування мишки, і звичайно ж “кліки” – все це і є події. До подій можна ще віднести події створювані скриптами, т. зв. тригери.

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

Базові події

Почнемо з азів. jQuery працює практично зі всіма подіями в JavaScript’е, наведу список функції з невеликими поясненнями:

  • change — зміни значення елемента (значення, при втрати фокусу, елемент відрізняється від початкового, при одержанні фокуса)
  • click — клік по елементу (порядок подій — mousedown, mouseup, click)
  • dblclick — подвійний клік по елементу
  • resize — зміна розмірів елементів
  • scroll – скролінг елемента
  • select — вибір тексту (актуальний тільки для input[type=text] і textarea)
  • submit — відправка форми
  • focus — фокус на елементі – актуально для input[type=text], але в сучасних браузерах працює і з іншими елементами
  • blur — фокус пішов з елемента – актуально для input[type=text] — спрацьовує при кліці по іншому елементу на сторінці або по події клавіатури (наприклад перемикання по tab’у)
  • focusin — фокус на елементі, дана подія спрацьовує на предка елемента, для якого сталася подія focus
  • focusout — фокус пішов з елемента, дана подія спрацьовує на предка елемента, для якого сталася подія blur
  • натискання — натискання клавіші на клавіатурі
  • keypress — натискання клавіші на клавіатурі (порядок подій — keydown, keypress, keyup)
  • keyup — віджимання клавіші на клавіатурі
  • load — завантаження елемента (img)
  • unload — вивантаження елемента (window)
  • mousedown — натискання клавіші миші
  • mouseup — віджимання клавіші миші
  • mousemove — рух курсору
  • mouseenter — наведення курсору на елемент, не спрацьовує при переході фокусу на дочірні елементи
  • mouseleave — висновок курсору з елемента, не спрацьовує при переході фокусу на дочірні елементи
  • mouseover — наведення курсору на елемент
  • mouseout — висновок курсору з елемента

Випробувати події можна на прикладі з подіями мишки і елементами форми.

Більшість з перерахованих подій можна імітувати безпосередньо з самого скрипта:

$(‘#menu li’).click();

Тригери

Для роботи з тригерами в jQuery визначені наступні функції:

  • bind (type, data, fnc) — додає обробник подій
  • one (type, data, fnc) — додає обробник подій, який спрацює лише раз
  • trigger (event data) — викликає обробники подій
  • triggerHandler( event data) — викликає обробники подій, без виклику події браузера
  • unbind (type, fnc) — видаляє всі обробники подій з елемента

$(‘.class’).bind(‘click’, function(){
// що робимо
});
// викликаємо обробник
$(‘.class’).trigger(‘click’);
// відключаємо обробник
$(‘.class’).unbind(‘click’);

Можна повісити тригер майже на будь-який об’єкт:

var obj = {
test:function() {
console.log(‘obj.test’);
}
}
$(obj).bind(‘someEvent’, function(){
console.log(‘obj.someEvent’);
this.test();
});
$(obj).trigger(‘someEvent’);

Простір імен

Зазвичай, коли ми хочемо створити/видалити свій обробник подій, ми пишемо наступний код (трохи вище я про це вже писав):

// створюємо свій обробник
$(‘.class’).bind(‘click’, function(){
// що робимо
});
// видаляємо всі обробники
$(‘.class’).unbind();

Але як завжди, є ситуації коли нам необхідно відключити не всі обробники (як приклад, треба вимкнути обробку якогось контрола певним плагіном), в цьому випадку нам на допомогу приходять простору імен, використовувати їх досить легко:

// створюємо обробник
$(‘.class’).bind(‘click.namespace’, function(){
// що робимо
});
// викликаємо обробник
$(‘.class’).trigger(‘click.namespace’);
// видаляємо всі обробники в даному просторі імен
$(‘.class’).unbind(‘click.namespace’);

Ще приклад, вішаємо обробник, який виводить текст в консоль.

$(‘.class’).bind(‘click.namespace’, function(){
console.log(‘bang’);
});
$(‘.class’).trigger(‘click.namespace’); // викликаємо подія, наш обробник спрацює
$(‘.class’).trigger(‘click’); // теж працює
$(‘.class’).trigger(‘click.other’); // подія з іншого простору імен, наш обробник не буде викликаний

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

$(‘.class’).bind(‘click.a.b’, function(){
// для просторів a і b
});
$(‘.class’).trigger(‘click.a’); // викликаємо обробник з простору a
$(‘.class’).unbind(‘click.b’); // скасовуємо обробник для простору b

Можна одним махом видалити всі обробники з певного простору імен:

$(‘.class’).bind(‘click.namespace’, function(){}); // обробник кліка
$(‘.class’).bind(‘blur.namespace’, function(){}); // обробник фокус
$(‘.class’).unbind(‘.namespace’); // передумали, і все скасували

  • Приклад використання тригерів і простору імен
  • Офіційна документація по просторах імен

Робота з live

Дуже часто при генерації сторінок AJAX’ом виникає необхідність повісити обробники подій на нові елементи в DOMе, для цієї мети служить метод live (перший параметр — ім’я події, другий — обробник).

Наведу приклад — є наступне завдання:

  • всі внутрішні посилання на сторінки повинні завантажувати контент АЈАХом в елемент з id=content
  • правило №1 вірно для посилань з подгруженного вмісту
  • Реалізувати перша вимога досить просто:

    $(‘a[href^=/]’).click(function(event){
    $(‘#content’).load($(this).attr(‘href’));
    return false; // еквівалентно викликом event.preventDefault(); і event.stopPropagation();
    });

    Виконати друге правило теж легко, досить злегка модифікувати попередній приклад:

    $(‘a[href^=/]’).live(‘click’, function(event){
    $(‘#content’).load($(this).attr(‘href’));
    event.preventDefault(); // скасовуємо дія за замовчуванням, але не чіпаємо киплячому – щоб не заважати іншим обробників
    });

    Підтримувані події: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup, change, submit, focusin, focusout, mouseenter, mouseleave
    Немає підтримки: blur, focus, change, submit

    На противагу функції live існує функція die — вона прибирає відстеження подій для знову з’явилися елементів.

    Хотілося б окремо зупинитися на принципі роботи методу live — даний метод працює завдяки т. н. «виринання» подій в DOMе — тобто коли ви клікаєте на будь-який елемент на сторінці, то в першу чергу подія спрацює на цьому елементі, якщо обробника події немає, або він не каже, що далі «спливати» не треба сказати, що він це може так event.stopPropagation()), то подія йде вгору по DOM дереву і ініціалізує обробники батьківського елемента, і так далі поки не досягне кореня — document’a. Таким чином метод live вішає обробник подій на document, і потім аналізує кожну подію на предмет наявності елементів описаних вами. Це звичайно не самий швидкий спосіб, але його можна прискорити, використовуючи метод delegate, його відмінність від live тільки в тому, що ви вказуєте елемент на який вішаєте обробник «live» подій, таким чином приклад вище можна записати так:

    $(‘#content’).представник(‘a[href^=/]’, ‘click’, function(event){
    $(‘#content’).load($(this).attr(‘href’));
    event.preventDefault();
    });

    Touch події

    Смартфони з великим сенсорним екраном — це вже не рідкість, ось і web-індустрія починає адаптуватися під користувачів того ж iPhone, якщо ж вам знадобилося подібна адаптація, то вам стане в нагоді наступна інформація:

    Події в JavaScript’е:

    • touchstart — аналогічно mousedown
    • touchmove — mousemove
    • touchend — mouseup
    • touchcancel — аналогії немає

    Про те, як з ними працювати, можна отримати з статей iPhone Touch Events in JavaScript і Touching and Gesturing on the iPhone

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

    Або в самому CSS:

    @media only screen and (max-device-width: 480px) {
    .sidebar {
    display: none;
    }
    }

    Детальніше читайте у статті iPhone Development: 12 Tips To Get You Started (переклад був тут)

    Цикл статей

  • jQuery для початківців
  • jQuery для початківців. Частина 2. JavaScript Меню
  • jQuery для початківців. Частина 3. AJAX
  • jQuery для початківців. Частина 4. Селектори
  • jQuery для початківців. Частина 5. Ефекти
  • jQuery для початківців. Частина 6. Події
  • jQuery для початківців. Частина 7. Пишемо плагіни
  • jQuery для початківців. Частина 8. Розширюємо фільтри
  • jQuery для початківців. Частина 9. Пишемо плагіни анімації