event.target — елемент, на якому виникла подія в JavaScript

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

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 працює однаково, що дозволяє ефективно керувати новими елементами. Не треба змінювати код для прив'язки подій, що робить цей інструмент універсальним для будь-яких оновлень на сторінці.

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

Порада

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

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

Порада

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

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

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

Синтаксис

event.target

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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

<header>
  <h2 class="title">Event -> target</h2>
  <p class="description">Дозволяє визначити, на якому елементі сталася подія.</p>
</header>
<main>
  <div class="result">
    <button class="action-btn" type="button">Натисни на мене</button>
    <button class="action-btn" type="button">Або на мене</button>

    <input class="text-input" type="text" placeholder="Введи текст тут" />
    
    <label>
      <input type="checkbox" class="toggle-checkbox" />
      Перемкни мене
    </label>
    
    <p class="log">Подія ще не відбулася</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button.action-btn {
  display: inline-block;
  margin-right: 10px;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

button.action-btn:hover {
  background-color: #0056b3;
}

input.text-input {
  display: block;
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #ccc;
  width: 100%;
}

.toggle-checkbox {
  margin-right: 5px;
}

p.log {
  margin-top: 15px;
  color: #333;
  font-style: italic;
}

document.querySelector('.result').addEventListener('click', function (event) {
  const logElement = document.querySelector('.log');

  if (event.target.classList.contains('action-btn')) {
    logElement.textContent = `Ви натиснули кнопку: ${event.target.textContent}`;
  }

  if (event.target.classList.contains('toggle-checkbox')) {
    logElement.textContent = event.target.checked ? 'Чекбокс увімкнено' : 'Чекбокс вимкнено';
  }
});

document.querySelector('.text-input').addEventListener('input', function (event) {
  const logElement = document.querySelector('.log');
  logElement.textContent = `Ви ввели: ${event.target.value}`;
});
//# sourceURL=pen.js

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

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