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

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

currentTarget — це властивість об'єкта Event, яка вказує на елемент, до якого прив'язаний слухач подій. Це корисно, коли вам потрібно точно визначити елемент, який безпосередньо викликав обробник події, незалежно від того, де саме в DOM ця подія була ініційована. Наприклад, якщо ви встановили обробник подій на елементі div, а подія була спричинена натисканням на вкладений елемент, властивість currentTarget все одно поверне елемент div.

Використання currentTarget зручно для визначення елемента, до якого прив’язаний обробник, на відміну від target, який вказує на елемент, що безпосередньо ініціював подію. Це особливо корисно, коли ви маєте справу з вкладеними елементами або використовуєте делегування подій. Наприклад, якщо встановити обробник подій на контейнер, ви можете визначити, що саме цей контейнер був «метою» для обробки події, навіть якщо подію спровокував дочірній елемент.

Приклад:

document.querySelector('.container').addEventListener('click', function(event) {
  console.log(event.currentTarget); // повертає '.container', навіть якщо натиснули на вкладений елемент
});

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

Якщо у вас є список елементів, таких як кнопки в одному контейнері, ви можете прив'язати один обробник подій до контейнера і обробляти всі кліки з допомогою currentTarget. Це також спрощує обробку, оскільки зменшує кількість обробників подій і підвищує продуктивність додатка.

document.querySelector('.button-list').addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') {
    console.log('Button clicked within list');
    console.log(event.currentTarget); // '.button-list'
  }
});

правити

Порада

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

автор: Bond правити

Порада

У разі динамічного додавання елементів у DOM, currentTarget все одно посилається на обробник, встановлений на контейнері. Таким чином, можна працювати з динамічними елементами без потреби додавати обробники подій для кожного з них.

автор: Bond правити

Порада

При використанні currentTarget та target разом можна визначити, чи був натиснутий дочірній елемент, перевіривши, чи відрізняються ці значення. Це спрощує аналіз подій і їх розподіл.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.currentTarget

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div class="gallery">перший елемент gallery</div>
<div class="gallery">другий елемент gallery</div>

document.querySelector('.gallery').addEventListener('click', function(event) {
  if (event.target.tagName === 'IMG') {
    event.target.style.border = '2px solid red';
  }
  console.log('Gallery container clicked:', event.currentTarget);
});

<div class="menu">перший елемент menu</div>
<div class="menu">другий елемент menu</div>

document.querySelector('.menu').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('Menu item clicked:', event.target.textContent);
  }
  console.log('Current Target:', event.currentTarget);
});