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'
}
});
| Порада: | При використанні |
| Порада: |
|
| Порада: | У разі динамічного додавання елементів у DOM, |
Синтаксис
event.currentTargetЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
7 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
14.5.0 |
1.0 |
Приклади
Код показує, як властивість event.currentTarget дозволяє обробнику визначити елемент, на якому він був встановлений, незалежно від того, де відбулася подія. Коли користувач натискає на одну з кнопок, ця кнопка змінює свій стиль, щоб вказати, що вона є активною.
Цей приклад показує, як за допомогою currentTarget можна обробляти події від дочірніх елементів меню, але при цьому знати, що подія була ініційована саме в контейнері .menu.
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);
});Тут currentTarget визначає контейнер .gallery, а target дає змогу обробляти натискання на конкретне зображення в галереї. Цей підхід дозволяє динамічно змінювати елементи всередині контейнера, а також застосовувати зміни лише до вкладених елементів без прямої роботи з контейнером.
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);
});