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

Методи

Властивості