Уроки 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);

 

 

Recent Posts

Як змінити HTML код вбудованих елементів WP oEmbed в WordPress?

Починаючи з WordPress версії 2.9 в двигун була додана підтримка oEmbed – формат простого API,… Read More

16/01/2021

Багатофункціональний пристрій коверлок: ключові особливості

Існує багато різновидів швейного обладнання, які відкривають великі можливості для вдосконалення навичок. Один з найскладніших… Read More

15/01/2021

Як зробити відкладене завантаження для HTML, iframe і вбудованого відео

Ліниве (або відкладене) завантаження (Lazy loading) – це популярний метод асинхронного звернення до адреси ресурсу,… Read More

13/01/2021

Google Search Console – Проблема з CLS та як її вирішити

Ми раніше писали про нововведення в інструменті для вебмайстрів Google Search Console – Основних веб-показниках.… Read More

11/01/2021

Найкращі водоспади світу (частина 3/3)

Водоспад – є одним з найбільш хвилюючих і найкрасивіших творінь матінки-природи у нашому світі. По… Read More

08/01/2021

Що таке Основні веб-показники в Google Search Console?

В кінці травня минулого року, а точніше 28 травня 2020 року, Google почав більш активно… Read More

07/01/2021