Разница между свойствами currentTarget и target в JS

Быстрый ответ

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

// Обработчик событиja привязан к форме
document.querySelector('form').addEventListener('click', (event) => {
  alert(`Target: ${event.target.tagName}`); // Вернет 'BUTTON'
  alert(`CurrentTarget: ${event.currentTarget.tagName}`); // Вернет 'FORM'
});

Здесь event.target returned значение BUTTON, в то время как event.currentTarget всегда будет указывать на FORM. Видим различие в поведении!

Разгадываем свойства события

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

Тем временем event.currentTarget остается неизменным и надежным — это элемент, к которому непосредственно привязан обработчик события. Этот аспект важен при работе с иерархией DOM или при создании гибких компонентов.

Примечательно, что некоторые события, такие как focus и blur, не всплывают: target и currentTarget в этих случаях будут одинаковыми.

Берегитесь асинхронных обработчиков

С асинхронными обработчиками стоит быть на уровне: они могут вызвать смену контекста, если не зафиксировать currentTarget. Запомните это, чтобы не потеряться в процессе обновления объекта события.

Пример работы с асинхронным обработчиком:

document.querySelector('form').addEventListener('click', async (event) => {
  const formReference = event.currentTarget; // Фиксируем элемент
  await someAsyncOperation();
  alert(`CurrentTarget: ${formReference.tagName}`); // Ссылка на элемент формы остается неизменной
});

Тонкости работы в браузере

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

Совершенствование работы со событиями

Изучение методов addEventListener и dispatchEvent, а также свойств target и currentTarget, расширяет возможности при работе с событиями, что, в свою очередь, ведет к повышению производительности и читаемости вашего кода.

Визуализация

Сравним отличия между event.target и event.currentTarget со сценой на вечеринке:

Место проведения вечеринки: #event.currentTarget
Собеседник: #event.target

На вечеринке:

- **Вы (👤)**: Прислушиваетесь к кому-то (🔊)
  – Это наш `event.target`: человек, который начинает разговор.

В то же время:

- **Помещение (🎉)**: Просторное и гостеприимное
  – Это `event.currentTarget`: место, которое собрало всех вместе.

Вы всегда будете слышать собеседника, но также и шум весь вечеринки вокруг вас.

Изменения в React 17

В React 17 произошли изменения в обработке синтетических событий: теперь не требуется вызывать evt.persist(). Это означает, что свойства событий target и currentTarget всегда доступны, даже в асинхронном коде.

Всплывание событий и вы

Понимание механизма всплывания событий дает вам инструменты для эффективного управления их обработкой. Если вы хотите прекратить распространение события, используйте event.stopPropagation() и задайте стратегии для обработки событий на разных уровнях.

Полезные материалы

1. Event: currentTarget property – Web APIs | MDN — Детали о свойстве currentTarget.
2. Event: target property – Web APIs | MDN — Информация о свойстве target.
3. Bubbling and capturing — Обучающий материал о принципах target и currentTarget в контексте делегирования событий.
4. What is the exact difference between currentTarget property and target property in JavaScript? – Stack Overflow — Обмен опытом и решения других разработчиков.
5. Event Bubbling in JavaScript? Event Propagation Explained — Подробное изучение механизмов всплывания и распространения событий.
6. Event Delegation — Исследование природы объектов событий и правил их поведения.