currentTarget и target Flashcards
currentTarget и target
currentTarget - элемент, к которому было привязано событие.
target - элемент, на который нажал пользователь в случае click события. Это может быть исходный элемент или любой из его дочерних элементов, в зависимости от того, где именно пользователь щелкнет.
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 или при создании гибких компонентов.
