Що робить event.target?
event.target - одна з найкорисніших властивостей об'єкта події.
Вона показує той елемент, на якому подія відбулася фактично,
тобто "джерело" події.
Визначення
event.target- це елемент DOM, на якому вперше відбулася подія (наприклад, клік, введення, наведення тощо).
Його можна отримати всередині обробника події, який приймає об'єкт event:
element.addEventListener('click', function(event) {
console.log(event.target);
});Приклад 1: базовий
<div id="container">
<button id="btn">Click me</button>
</div>document.querySelector('#container').addEventListener('click', (event) => {
console.log('event.target:', event.target);
});Якщо ти клікнеш по кнопці, то в консолі буде:
event.target: <button id="btn">Click me</button>Тобто target = елемент, на який клікнули,
а не той, на якому "висить" обробник (#container).
Приклад 2: відмінність від currentTarget
| Властивість | Що показує |
|---|---|
event.target | Елемент, де відбулася подія (внутрішній) |
event.currentTarget | Елемент, на якому висить обробник |
document.querySelector('#container').addEventListener('click', (event) => {
console.log('target:', event.target);
console.log('currentTarget:', event.currentTarget);
});Якщо клік по <button> всередині контейнера:
target: <button>
currentTarget: <div id="container">Приклад 3: делегування подій
Це одне з найчастіших застосувань event.target.
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>document.querySelector('#list').addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
console.log(`Клік по елементу: ${event.target.textContent}`);
}
});Тут ми навісили один обробник на весь список,
а всередині перевіряємо, по якому саме <li> клікнули.
Це називається делегування подій - економить пам'ять і пришвидшує роботу, особливо якщо елементів багато.
Приклад 4: у формах
form.addEventListener('input', (event) => {
console.log('Змінено елемент:', event.target.name);
console.log('Нове значення:', event.target.value);
});Дозволяє відстежувати зміни всіх полів форми через один обробник.
Підсумок
| Властивість | Що робить |
|---|---|
event.target | Елемент, де відбулася подія |
event.currentTarget | Елемент, на якому висить обробник |
| Використовується для | Делегування, перевірки джерела події, доступу до елемента, по якому клікнули |
| Тип даних | DOM-елемент (HTMLElement) |
Висновок:
event.target- це "справжнє джерело" події. З його допомогою можна точно дізнатися, де саме користувач клікнув, ввів текст чи викликав іншу дію.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.