Уроки JavaScript – Короткий огляд подій в браузері

Перш, ніж ми перейдемо до розгляду даної теми, важливо зробити акцент на одній речі: дерево DOM і мова JavaScript – це дві різні сутності. Події браузера є частиною API DOM, але вони не є частиною JavaScript.

Події браузера є основою будь-якого веб-додатку і вони дуже часто використовуються в JavaScript. Саме через ці події ми визначаємо те, що має статися. Якщо у вашому документі є кнопка, і вам потрібна перевірка форми при її натисканні, ви повинні використовувати подію «click».

 

 

Стандартні події браузера

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

Події миші

• ‘mousedown‘ – подія mousedown викликається, коли вказівний пристрій (зазвичай мишка) натискається вниз над елементом.
• ‘mouseup‘ – подія mouseup викликається, коли вказівний пристрій (зазвичай мишка) відпускається вгору над елементом.
• ‘click‘ – подія click визначається як mousedown, за яким слідує mouseup в тому ж положенні.
• ‘dblclick‘ – ця подія викликається, коли на елементі клацають двічі у швидкій послідовності в одній і тій же позиції (подвійний клік).
• ‘mouseover‘ – подія mouseover викликається, коли пристрій переміщається над елементом.
• ‘mouseout‘ – подія mouseout викликається, коли вказівний пристрій переміщається в сторону від елемента.
• ‘mousemove‘ – подія mousemove викликається, коли вказівний пристрій переміщається при наведенні на елемент.

 

Події клавіатури

• ‘keypress‘ – ця подія викликається при кожному натисканні клавіші на клавіатурі.
• ‘keydown‘ – ця подія також спрацьовує при кожному натисканні клавіші, вона запускається до події keypress.
• ‘keyup‘ – ця подія викликається при відпусканні клавіші після подій keydown і keypress.

 

Події форми

• ‘select‘ – ця подія викликається, коли обирається текст всередині текстового поля (input, textarea і т.д.).
• ‘change‘ – ця подія викликається, коли елемент управління втрачає фокус введення і/або значення було змінено з моменту отримання фокусу.
• ‘submit‘ – ця подія викликається при відправці форми.
• ‘reset‘ – ця подія викликається при скиданні форми.
• ‘focus‘ – ця подія викликається, коли елемент отримує фокус (зазвичай від курсора миші).
• ‘blur‘ – ця подія викликається, коли елемент втрачає фокус.

 

Інші події

• ‘load‘ – ця подія викликається, коли браузер завершив завантаження всього вмісту в документі, включаючи контент, картинки, фрейми і об’єкти.
• ‘resize‘ – ця подія викликається при зміні розміру документа (тобто коли змінюється розмір браузера)
• ‘scroll‘ – ця подія викликається при прокручуванні документа.
• ‘unload‘ – ця подія викликається, коли браузер видаляє весь контент з вікна або фрейму, тобто коли ви покидаєте сторінку.

 

 

Є ще багато й інших подій. Ті, що показані вище, є основними, і з ними ви будете часто стикатися в JavaScript коді. Майте на увазі, що деякі з них мають відмінності в різних браузерах. Крім того, майте на увазі, що різні браузери реалізують власні специфічні події.

 

 

Обробка подій

Ми коротко розглянули події, але нам ще належить обговорити процес зв’язування певних функцій з подією. Ось де відбувається чаклунство. Всі перераховані вище події будуть відбуватися незалежно від того, чи написали ви якийсь код JavaScript, тому, щоб використовувати їх можливості, ви повинні зареєструвати «обробники подій», — це функції, які використовуються для обробки події. Нижче представлений простий приклад використання базової моделі реєстрації подій (також відомої як «традиційна реєстрація подій»):

<button id="some-button">Натисни мене!</button>
// JavaScript:
var someElement = document.getElementById('some-button');
// Ця функція буде нашим обробником подій:
function clickButton() {
  alert('Ви тільки що натиснули кнопку!');
}
// Тут реєстрація події:
someElement.onclick = clickButton;

 

У нас є кнопка з ідентифікатором «some-button», і ми отримали до неї доступ за допомогою document.getElementById. Потім ми створюємо нову функцію, яка пізніше призначається властивості DOM «onclick» кнопки. Ось і все, що потрібно зробити!

 

Модель «реєстрації базової події» настільки проста, наскільки це можливо. Ви додаєте префікс до події після «on» і отримуєте до неї доступ як до властивості будь-якого елементу. По суті, це інша версія виконання чогось подібного (що не є рекомендованим):

<button >
 
 
Вбудована обробка подій (з використанням атрибутів HTML) робить підтримку вашого сайту набагато складнішою. Краще використовувати ненав’язливий JavaScript і зберігати все це в відповідних файлах .js, які можуть підключатися в документ по мірі необхідності. Причину, через яку ви не повинні використовувати вбудовану обробку подій, можна порівняти з причиною, по якій не бажано використовувати вбудовані CSS стилі (використовуючи style="...").
 
 
 
 
 
Розширена реєстрація події
 
Назва «розширена» не повинна вводити вас в оману, — це не означає, що її краще використовувати. Розглянута вище методика (базова модель реєстрації) ідеально підходить в більшості випадків. Використання базової техніки має одне ключове обмеження – ви не можете прив’язати більше однієї функції до події. Це не так вже й погано, оскільки ви можете викликати будь-яку кількість інших функцій з цієї єдиної функції, але якщо вам потрібно більше контролю, тоді використовуйте розширену модель реєстрації подій.
 
Ця модель дозволяє прив’язувати кілька обробників до однієї події, що означає, що при виникненні події будуть працювати кілька функцій. Крім того, ця модель дозволяє легко видалити будь-який з пов’язаних обробників подій.
 
Нижче приклад даної моделі:
 
var myParagraph = document.getElementById('paragraph');
myParagraph.addEventListener('click', paragraphClick, false);
// функція paragraphClick:
function paragraphClick() {
  alert('Ви натиснули на параграф!');
}
 
 
 
 
 
Методи addEventListener і removeEventListener
 
Методи addEventListener і removeEventListener є одними з популярних способів привласнити або видалити обробник. Вони також дозволяють використовувати велику кількість будь-яких інших обробників.
 
Присвоєння обробника здійснюється викликом методу addEventListener із зазначенням 3-х аргументів:
 
element.addEventListener (event, handler, phase);
 
 
 
 
event: тип події, наприклад click
 
handler: посилання на функцію, яка буде виступати обробником
 
phase: логічне значення, яке визначає, на якій фазі повинен спрацювати обробник. Необов’язковий аргумент. true – фаза перехоплення, false – фаза спливання
 
 
 
 
Видалення обробника здійснюється викликом методу removeEventListener, з передачею тих же аргументів, що були у addEventListener:
 
element.removeEventListener(event, handler, phase);