Від автора: після завантаження і повної готовності веб-сторінки в JavaScript запускається цілий каскад подій, яких стає ще більше, коли користувач починає взаємодіяти зі сторінкою тим або іншим чином. До подій можна віднести завантаження сторінки, її прокручування, клік по кнопці або навіть заповнення форми. Для запуску подій в JavaScript потрібен спеціальний код, який ви самі створюєте і прописуєте, вибудовуючи тим самим більш глибоке взаємодія.
Події в JS можна розділити на 4 великі групи:
UI події: спрацьовують, коли користувач взаємодіє з UI браузера (кнопки навколо веб-сторінки, які є частиною інтерфейсу браузера). До таких подій можна віднести ті дії, які виконує сторінка незалежно від користувача. До таких подій належить зміна розміру вікна, прокрутка сторінки, завантаження і вивантаження вмісту.
Події клавіатури, миші і тачскріна: спрацьовують, коли користувач натискає або відпускає кнопки на клавіатурі, управляє мишею, трекпадом або працює з тачскріном.
Події фокусу і фори. Здебільшого асоціюються з формами: полі input «отримує фокус», коли користувач готовий з ним взаємодіяти. Інші події відстежують передачу форми, змінення значень полів форми і т. д.
Події мутацій і спостерігачі. Мутуючі елементи відслідковуються при зміні структури DOM: наприклад, коли на сторінці вставляються або видаляються за допомогою скрипта.
Прив’язка обробника події
Спеціальний код, який буде спрацьовувати тільки для певного елемента DOM, створює обробник події. В JS є три способи створити обробник подій:
1. Стандартний HTML обробник події через атрибути
Найстаріший метод прив’язки подій, один з найбільш зустрічаються досі. Метод використовує спеціальні атрибути в розмітці. Наприклад:
У прикладі вище після того, як поле отримає фокус, і користувач перейде до заповнення наступного поля (наприклад, за допомогою TAB або звичайного кліка), елемент викличе функцію checkName, яка написана в JS.
Стандартні HTML обробники подій не рекомендують використовувати в сучасній розробці, в основному з-за того, що функціонал перемішується з розміткою, що ускладнює роботу і налагодження коду.
2. Стандартні обробники подій в DOM
Дана техніка поділяє JS і розмітку, але має те ж саме обмеження – подій можна присвоїти тільки одну функцію. Еквівалентної записом HTML обробника подій в DOM буде:
var username = document.getElementbyId(“username”);
username.onblur = checkName;
Як і в попередньому прикладі, функція checkName запускається після того, як елемент форми втрачає фокус.
3. Обробники подій (Event Listeners)
Сучасний метод додавання обробника подій, що дозволяє чіпляти кілька подій і функцій:
var username = document.getElementbyId(“username”);
username.addEventListener. (“blur”, checkName, false);
Логічне значення в кінці вказує на те, чи потрібно захопити подія. Зазвичай задається false. У простих скриптах подія часто записується у вигляді анонімної функції:
var username = document.getElementbyId(“username”);
username.addEventListener. (“blur”, function() {
// дії по спрацьовуванню події
})
Зверніть увагу, що в HTML DOM обробниках подій присутній префікс on, якого немає в сучасних обробниках. В майбутніх статтях я детально опишу події, а зараз варто приділити увагу парі речей:
Не всі події дорівнюють
Важливо зрозуміти, що не всі події можна обробити однаково. Події scroll і resize запускаються дуже часто, із-за чого з ними потрібно дуже обережно працювати, щоб не знизити швидкість роботи скрипта. Те ж саме стосується і на перший погляд невинних подій типу input. Продуктивність скрипта може сильно просісти, якщо він буде намагатися постійно відповідати на часто запускається подія input на слайдері range.
Не всі події відстежуються
Спостерігачі за мутаціями на даний момент не можуть відслідковувати всі зміни в усіх елементах на сторінці. Приміром, немає способу відстежити зміна висоти елемента (при звуженні контейнера в адаптивному дизайні текст всередині нього перебудовується, а елементи стають довшими). Все ж таки є способи відстежити зміни, про це я розповім в наступній статті.
Прикріплюйте події до правильних елементів
Подія onclick застосовується до багатьох елементів, в тому числі і до посилань. Є загальне правило – до посилань не рекомендується чіпляти код JS. По кліку на посилання користувач повинен потрапити на іншу область сайту або на якір. Якщо ж вам потрібен UI елемент, за допомогою якого можна змінити щось на тій же сторінці, тоді вам підійде button. Кнопку можна без проблем вішати JavaScript.
Не використовуйте JavaScript, якщо це можна зробити за допомогою CSS
У порівнянні з CSS JavaScript повільний і ненадійний. По суті, CSS потрібно використовувати в якості альтернативи складним скриптам скрізь, де це можливо. Тим не менш, CSS не вміє. Він добре справляється з :hover (у багатьох випадках він замінює події дотику), а також може замінити подія click за допомогою :target в деяких випадках. CSS-анімація автоматично запускається після завантаження сторінки, а також є спеціальні CSS стану, які можна запускати для елементів типу радіо кнопок. Однак щось більш складне зазвичай краще залишити для JavaScript.
