DOM

DOM⚑

Що таке ціль події або цільовий елемент event.target?⚑

Summary

Ціль події або цільовий елемент (event.target) - це елемент, на якому сталася подія, і який спочатку викликав цю подію.

Ціль події (event.target) - це DOM-елемент, на якому сталася подія. Цей елемент є відправною точкою процесу поширення події. Значення event.target завжди вказує на елемент, який ініціював подію, незалежно від того, де в ланцюжку розповсюдження (захоплення або спливання) був викликаний обробник.

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

У цьому прикладі, якщо натиснути на дочірній елемент всередині елемента з id="parent", event.target буде посилатися на дочірній елемент, а не на елемент parent.

event.target корисний для виконання дій, специфічних для елемента, на якому сталася подія. Наприклад, можна використовувати його для делегування подій, коли один обробник події на батьківському елементі обробляє події для багатьох дочірніх елементів.

Ще один приклад:

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<script>
document.getElementById('list').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Clicked item:', event.target.textContent);
    }
});
</script>

Тут один обробник події на ul обробляє кліки на будь-яких елементах всередині нього, використовуючи event.target для визначення, який елемент був клікнутий.

Що таке спливання подій?⚑

Summary

Спливання подій (event bubbling) в JavaScript - це фаза поширення події, в якій подія, розпочавшись на цільовому елементі, переміщається вгору по дереву DOM до кореневого елемента, викликаючи обробники подій, призначені на кожному проміжному елементі.

Спливання подій - це процес, при якому подія, що відбувається на цільовому елементі, переміщається вгору по ієрархії DOM, послідовно викликаючи обробники подій на всіх його батьківських елементах. Ця фаза починається після того, як подія досягла цільового елемента і всі його обробники були виконані.

За замовчуванням, коли подія створюється, спочатку проходить фазу занурення (capturing), досягає цільового елемента (target phase), а потім починає спливання. Спливання дозволяє використовувати один обробник події для батьківського елемента, щоб обробляти події, що відбуваються на його дочірніх елементах.

// Handler on parent element
document.getElementById('parent').addEventListener('click', function() {
    console.log('Parent element');
});

// Handler on child element
document.getElementById('child').addEventListener('click', function() {
    console.log('Child element');
});

У цьому прикладі, при натисканні на елемент child, спочатку виконається обробник на child, а потім обробник на parent, так як подія спливає вгору по дереву DOM.

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