JS об'єкт Event

Введення в об'єкт Event

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

document.addEventListener('click', function(event) {
    console.log(event);
});

У цьому прикладі ми додаємо обробник подій до документа, який буде "слухати" подію "click". Якщо десь на сторінці відбудеться клік, функція з внутрішнім кодом активується. Всередині функції ми можемо вивести об'єкт події, що створився, у консоль.

Важливо зрозуміти, що об'єкт Event — це тимчасовий об'єкт, який створюється лише на час обробки події. Він містить інформацію про поточний стан події, наприклад, про те, яка клавіша була натиснута або де відбувся клік мишею на сторінці.

Окрім цього, об'єкт Event містить методи, що дозволяють контролювати подію: переривати її поширення, запобігати діям за замовчуванням та інше. Завдяки цьому можна створювати більш розширені та налаштовані реакції на події користувача.

Властивості об'єкта Event

Об'єкт Event в JavaScript включає в себе численні властивості, що дозволяють зрозуміти контекст, у якому відбулась подія. Властивості допомагають отримувати конкретну інформацію про подію та реагувати на неї відповідним чином.

event.target: Ця властивість вказує на об'єкт, де відбулась подія. Наприклад, якщо користувач клікнув на кнопку, event.target буде цією кнопкою.

document.addEventListener('click', function(event) {
    console.log(event.target);
});

У цьому прикладі, при кліку будь-де на сторінці, в консоль буде виведено елемент, на який було здійснено клік. Це може бути, наприклад, параграф тексту, зображення чи інший елемент сторінки.

event.type: Показує тип події (наприклад, "click", "keydown").

document.addEventListener('click', function(event) {
    console.log(event.type);  // виведе "click"
});

Тут ми слухаємо клік по документу. Коли користувач клікає, у консоль виводиться тип події, у даному випадку — "click".

event.currentTarget: Ця властивість вказує на елемент, до якого було призначено обробник події, в той час як event.target може вказувати на дочірній елемент.

button.addEventListener('click', function(event) {
    console.log(event.currentTarget);  // буде кнопка, незалежно від місця кліку
});

У вищезазначеному прикладі, навіть якщо всередині кнопки є інші елементи (наприклад, текст чи іконка) і клік відбувається по них, event.currentTarget завжди буде вказувати на кнопку.

event.timestamp: Час відбування події у мілісекундах від моменту завантаження сторінки.

document.addEventListener('click', function(event) {
    console.log(event.timestamp);
});

Коли користувач клікає на сторінку, у консоль виводиться час від початку завантаження сторінки до моменту кліку в мілісекундах.

Розуміння та використання властивостей об'єкта Event дозволяє глибше взаємодіяти з користувачем і точніше реагувати на його дії на веб-сторінці. Кожна властивість дає вам додаткову інформацію, яка може бути використана для реалізації різних сценаріїв взаємодії з користувачем.

Делегування подій

Однією з ключових особливостей роботи з об'єктом Event є можливість делегування подій. Ідея полягає в тому, щоб додати один обробник подій до батьківського елемента замість додавання окремих обробників до кожного дитячого елемента. Коли подія відбувається на дитячому елементі, вона "поширюється" вверх до батьківського елемента, де її можна обробити.

Приклад:

let ul = document.querySelector('ul');
ul.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log(event.target.textContent);
    }
});

У цьому прикладі ми додаємо обробник подій до елемента <ul>. Коли користувач клікає на будь-який елемент <li> всередині <ul>, обробник виводить текст цього елемента. Таким чином, нам не потрібно додавати окремі обробники до кожного <li>, що є дуже ефективним для великих списків або коли елементи динамічно додаються на сторінку.

Синтаксис

let obj = new Event();

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

document.querySelector('form').addEventListener('submit', function(event) {
    var name = document.querySelector('#name').value;
    if(name === "") {
        alert('Будь ласка, введіть ваше ім'я!');
        event.preventDefault();
    }
});

document.querySelector('ul').addEventListener('click', function(event) {
    if(event.target.tagName === 'LI') {
        alert(event.target.textContent);
    }
});

document.querySelector('.tabs').addEventListener('click', function(event) {
    if(event.target.classList.contains('tab')) {
        document.querySelectorAll('.content').forEach(function(content) {
            content.classList.add('hidden');
        });
        var tabContent = document.querySelector(event.target.dataset.tabTarget);
        tabContent.classList.remove('hidden');
    }
});

Методи

Властивості

change

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

click

Спрацьовує, коли користувач натискає на елемент.

contextmenu

Спрацьовує при виклику контекстного меню правою кнопкою миші.

copy

Спрацьовує, коли користувач копіює текст до буфера обміну.

cut

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

abort

Виникає, коли завантаження медіафайлу скасовується користувачем або програмою.

afterprint

Виконується після завершення друку або закриття вікна попереднього перегляду друку.

animationend

Виконується, коли CSS-анімація завершила своє виконання.

dblclick

Спрацьовує, коли користувач двічі клацає лівою кнопкою миші на елементі.

animationiteration

Виконується кожного разу при завершенні одного циклу CSS-анімації.

animationstart

Виконується на початку CSS-анімації після її запуску.

beforeprint

Виконується перед початком друку або відкриттям вікна попереднього перегляду друку.

beforeunload

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

blur

Спрацьовує, коли елемент втрачає фокус.

canplay

Подія сигналізує, що медіафайл можна починати відтворювати, не обов’язково до кінця завантажений.

canplaythrough

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

drag

Спрацьовує, коли користувач перетягує елемент на веб-сторінці.

dragend

Спрацьовує після завершення перетягування елемента користувачем.

dragenter

Спрацьовує, коли перетягуваний елемент входить в область цільового елемента.

dragleave

Спрацьовує, коли перетягуваний елемент покидає межі цільового елемента.

dragover

Дозволяє перетягувати елементи над цільовим елементом, підтримуючи скидання.

dragstart

Ініціює перетягування елемента, встановлюючи дані для операції перетягування.

drop

Визначає дію після скидання перетягуваного елемента в цільову зону.

durationchange

Виконує дію, коли змінюється тривалість медіафайлу (аудіо чи відео).

ended

Виконується при завершенні відтворення мультимедійного елемента.

error

Виконується при виникненні помилки під час завантаження ресурсу або виконання медіа.

focus

Спрацьовує, коли елемент отримує фокус (наприклад, поле вводу).

focusin

Викликається, коли елемент отримує фокус або коли фокус переходить до його нащадків.

focusout

Викликається, коли елемент або його нащадки втрачають фокус.

fullscreenchange

Викликається, коли елемент входить у повноекранний режим або виходить із нього.

fullscreenerror

Викликається, коли не вдається увійти або вийти з повноекранного режиму через помилку.

hashchange

Спрацьовує, коли змінюється фрагмент URL-адреси після символа решітки.

input

Спрацьовує кожного разу, коли користувач змінює значення в полі введення.

invalid

Спрацьовує, коли значення в полі форми є невалідним відповідно до вбудованих правил валідації.

keydown

Спрацьовує при натисканні будь-якої клавіші на клавіатурі.

keypress

Спрацьовує, коли користувач натискає клавішу, що генерує символ.

keyup

Спрацьовує, коли користувач відпускає натиснуту клавішу на клавіатурі.

load

Виконується, коли повністю завантажені всі ресурси сторінки, включно з зображеннями та стилями.

loadeddata

Виконується, коли достатньо медіаданих завантажено для початку відтворення.

loadstart

Викликається на початку завантаження ресурсу, наприклад, відео або файлу.

message

Використовується для обробки повідомлень між різними вікнами чи вкладками браузера.

mousedown

Реєструє натискання кнопки миші на елементі та запускає відповідний обробник події.

mouseenter

Викликається, коли курсор миші входить на елемент, не реагуючи на дочірні елементи.

mouseleave

Викликається, коли курсор миші виходить з елемента, не враховуючи дочірні елементи.

mousemove

Реєструє рух курсора миші по елементу або сторінці і запускає відповідний обробник.

mouseover

element.addEventListener('mouseover', function(event) { // обробка події });

mouseout

Викликається, коли курсор миші залишає межі елемента або переходить на дочірній елемент.

mouseup

Викликається, коли користувач відпускає кнопку миші після її натискання.