Что такое CurrentTarget

1️⃣ Как кратко ответить

currentTarget — это свойство объекта события в JavaScript, которое указывает на элемент, к которому прикреплен обработчик события. Оно всегда ссылается на элемент, на котором был вызван обработчик, в отличие от target, который указывает на элемент, инициировавший событие.

2️⃣ Подробное объяснение темы

В JavaScript для работы с событиями используется объект события, который содержит информацию о событии и его контексте. Одним из ключевых свойств этого объекта является currentTarget.

Зачем нужен currentTarget

Когда происходит событие, например, клик мыши, оно может инициироваться на одном элементе, но обработчик события может быть привязан к другому элементу. currentTarget помогает определить, к какому элементу был привязан обработчик события, что особенно полезно при использовании делегирования событий.

Различие между target и currentTarget

• target: Указывает на элемент, на котором произошло событие. Это может быть вложенный элемент, например, кнопка внутри контейнера.
• currentTarget: Указывает на элемент, к которому прикреплен обработчик события. Это всегда будет элемент, на котором был вызван обработчик.

Пример использования

Рассмотрим пример, где мы используем делегирование событий:

<div id="container">
  <button>Button 1</button>
  <button>Button 2</button>
</div>
​
<script>
  // Получаем элемент контейнера
  const container = document.getElementById('container');
​
  // Добавляем обработчик события на контейнер
  container.addEventListener('click', function(event) {
    // event.currentTarget указывает на контейнер
    console.log('currentTarget:', event.currentTarget);
​
    // event.target указывает на элемент, на котором произошло событие
    console.log('target:', event.target);
  });
</script>

Объяснение кода:

1. HTML-разметка: У нас есть div с двумя кнопками внутри. Это наш контейнер, к которому мы будем привязывать обработчик события.

2. Получение элемента контейнера: Мы используем document.getElementById('container'), чтобы получить ссылку на элемент div.

3. Добавление обработчика события: Мы добавляем обработчик события click на контейнер. Это значит, что каждый раз, когда происходит клик внутри контейнера, будет вызываться эта функция.

4. Использование currentTarget и target:

   • event.currentTarget всегда будет указывать на div с id container, потому что обработчик события привязан именно к этому элементу.
   • event.target указывает на конкретный элемент, на котором произошло событие. Если пользователь кликнет на одну из кнопок, event.target будет указывать на эту кнопку.

Применение

currentTarget особенно полезен в ситуациях, когда вы используете делегирование событий. Это позволяет вам обрабатывать события на родительском элементе, даже если событие инициировано на вложенном элементе. Это упрощает код и улучшает производительность, так как вам не нужно добавлять обработчики событий на каждый вложенный элемент.