Чим event.target відрізняється від event.currentTarget?
Коротко:
| Властивість | Що показує |
|---|---|
event.target | Елемент, на якому реально відбулася подія (джерело, "клікнули сюди") |
event.currentTarget | Елемент, на якому зараз виконується обробник (той, хто "слухає") |
Приклад 1: базова різниця
<div id="parent">
<button id="child">Клікни мене</button>
</div>const parent = document.querySelector('#parent');
const child = document.querySelector('#child');
parent.addEventListener('click', (event) => {
console.log('target:', event.target);
console.log('currentTarget:', event.currentTarget);
});Якщо клікнути по кнопці (#child), то в консолі буде:
target: <button id="child">
currentTarget: <div id="parent">Тобто:
target- де подія виникла (всередині кнопки),currentTarget- де зараз виконується обробник (на батьківському елементі).
Приклад 2: якщо клікнути прямо по батьківському елементу
Якщо клік по самому div#parent, тоді:
target: <div id="parent">
currentTarget: <div id="parent">Обидва збіжаться, тому що подія і виникла, і обробляється на тому самому елементі.
Чому так?
Тому що події в DOM спливають:
вони спочатку відбуваються на конкретному елементі (target),
а потім піднімаються вгору по дереву - до батьків.
На кожному рівні викликається свій обробник. І в момент його виклику:
currentTarget= елемент, у якого висить цей обробник,target= початкове джерело події (не змінюється при спливанні).
Приклад 3: делегування подій
Дуже частий випадок - один обробник на контейнер:
<ul id="menu">
<li>Головна</li>
<li>Каталог</li>
<li>Контакти</li>
</ul>const menu = document.querySelector('#menu');
menu.addEventListener('click', (event) => {
console.log('target:', event.target.textContent);
console.log('currentTarget:', event.currentTarget.id);
});Якщо клікнути на пункт "Каталог":
target: Каталог
currentTarget: menutarget -> конкретний <li>,
currentTarget -> сам <ul>, де висить обробник.
Саме тому делегування можливе:
ми слухаємо одну подію (click на списку),
але через event.target визначаємо, на який пункт клікнули.
Приклад 4: декілька слухачів
parent.addEventListener('click', (e) => console.log('parent', e.currentTarget));
child.addEventListener('click', (e) => console.log('child', e.currentTarget));Якщо клікнути по кнопці:
child <button id="child">
parent <div id="parent">- Спочатку спрацьовує обробник на кнопці (
targetіcurrentTarget= button), - Потім подія спливає до
div, і там ужеcurrentTarget= div, аtargetзалишається тим самим (button).
Підсумок
| Властивість | Опис | Змінюється при спливанні? |
|---|---|---|
event.target | Елемент, де подія відбулася | Ні, завжди той самий |
event.currentTarget | Елемент, на якому зараз виконується обробник | Так, на кожному рівні свій |
| Використовується для | Визначити джерело події | Отримати сам елемент-слухач |
Запам'ятай просто:
target- "де сталося",currentTarget- "хто слухає".
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.