JS властивість Event.target

Загальний опис

target — це властивість об'єкта Event, яка повертає посилання на елемент, що викликав подію. Це може бути будь-який HTML-елемент, на якому сталася подія, наприклад, натискання кнопки або введення тексту в поле форми.

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

Властивість target працює зі всіма стандартними подіями JavaScript, такими як click, input, keydown, focus, та інші. Важливо розуміти, що ця властивість повертає саме елемент, на якому була викликана подія, а не той елемент, до якого була прив'язана подія (це різниця між target і currentTarget).

Приклад використання:

document.addEventListener('click', function(event) {
  console.log(event.target);  // Виведе в консоль елемент, на якому стався клік
});

У цьому прикладі обробник подій для події click спрацьовує на всьому документі. Однак за допомогою event.target ми можемо точно визначити, на якому саме елементі було натиснуто.

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

Порада:	Для динамічно створених елементів (елементів, доданих у DOM після завантаження сторінки), обробка подій через `target` працює однаково, що дозволяє ефективно керувати новими елементами. Не треба змінювати код для прив'язки подій, що робить цей інструмент універсальним для будь-яких оновлень на сторінці.
Порада:	Завжди варто перевіряти тип або властивості елемента, отриманого через `event.target`. Це допомагає уникнути помилок при роботі з різними типами елементів. Наприклад, якщо подія сталася на зображенні або на посиланні, методи доступу до цих елементів можуть відрізнятися.
Порада:	`event.target` може змінюватися при використанні технологій, які маніпулюють DOM, таких як `shadow DOM`. Якщо ви використовуєте подібні технології, треба враховувати цю специфіку, щоб уникнути неправильного поводження з елементами.

Синтаксис

event.target

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/NWQvmrZ">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

document.querySelector('.container').addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') {
    console.log(`Натиснута кнопка з текстом: ${event.target.textContent}`);
  }
});

У цьому випадку ми використовуємо event.target разом із closest() для того, щоб визначити найближчий елемент списку (li), навіть якщо клік був на вкладеному елементі всередині li. Це корисно, коли нам потрібно працювати з батьківськими елементами, незалежно від того, куди саме користувач натиснув.

document.querySelector('.list').addEventListener('click', function(event) {
  const clickedItem = event.target.closest('li');
  if (clickedItem) {
    console.log(`Вибрано елемент списку: ${clickedItem.textContent}`);
  }
});

JS довідник

JavaScript

Наповнення JS розділу