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>, що є дуже ефективним для великих списків або коли елементи динамічно додаються на сторінку.

правити

Порада

Не блокуйте дії за замовчуванням без потреби. Коли ви використовуєте метод event.preventDefault(), це зупиняє стандартну дію браузера на певну подію (наприклад, перехід по посиланню). Хоча це корисно в певних ситуаціях, надмірне використання може спричинити проблеми зі стандартною поведінкою сторінки.

автор: Bond правити

Порада

Використовуйте делегування подій. Замість того, щоб додавати обробник подій до кожного елемента окремо, додайте один обробник до їх спільного предка. Це не тільки поліпшить продуктивність, але і спростить управління динамічно доданими елементами.

автор: Bond правити

Порада

Будьте обережні із порядком подій. Різні браузери можуть виводити події в різному порядку. Наприклад, подія "focus" може виконуватися перед чи після події "click" в залежності від браузера. Тому завжди тестуйте свій код в різних браузерах.

автор: Bond правити

Порада

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

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

let obj = new Event();

методи

властивості

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	4	1	4	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	1

Підтримка: серверні переглядачі

Переглядач
	14.5.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div class="tabs">перший елемент tabs</div>
<div class="tabs">другий елемент tabs</div>
<div class="content">перший елемент content</div>
<div class="content">другий елемент content</div>

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');
    }
});

// Браузерний аналог EventEmitter — EventTarget + CustomEvent
const server = new EventTarget();

server.addEventListener('request', (event) => {
    const req = event.detail;

    if (req.type === 'GET') {
        console.log(`Отримано GET-запит для: ${req.url}`);
    } else if (req.type === 'POST') {
        console.log(`Отримано POST-запит з даними: ${JSON.stringify(req.data)}`);
    }
});

// Емітуємо запити
server.dispatchEvent(new CustomEvent('request', { detail: { type: 'GET', url: '/home' } }));
server.dispatchEvent(new CustomEvent('request', { detail: { type: 'POST', data: { user: 'Олег' } } }));

// У браузері роль node-івського EventEmitter відіграє EventTarget + CustomEvent
const logger = new EventTarget();

logger.addEventListener('log', event => {
    const { level, message } = event.detail;
    console.log(`[${level.toUpperCase()}]: ${message}`);
});

// Відправляємо події логування
logger.dispatchEvent(new CustomEvent('log', {
    detail: { level: 'info', message: 'Система запущена' },
}));
logger.dispatchEvent(new CustomEvent('log', {
    detail: { level: 'error', message: 'Невдала спроба підключення' },
}));