Разница между свойствами 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()
и задайте стратегии для обработки событий на разных уровнях.
Полезные материалы
- Event: currentTarget property – Web APIs | MDN — Детали о свойстве
currentTarget
. - Event: target property – Web APIs | MDN — Информация о свойстве
target
. - Bubbling and capturing — Обучающий материал о принципах target и currentTarget в контексте делегирования событий.
- What is the exact difference between currentTarget property and target property in JavaScript? – Stack Overflow — Обмен опытом и решения других разработчиков.
- Event Bubbling in JavaScript? Event Propagation Explained — Подробное изучение механизмов всплывания и распространения событий.
- Event Delegation — Исследование природы объектов событий и правил их поведения.