В JavaScript target и currentTarget являются свойствами объекта события, который генерируется при возникновении события. Они представляют различные элементы дерева DOM, связанные с событием.
target относится к элементу, для которого изначально было инициировано событие, тогда как currentTarget относится к элементу, который в настоящее время обрабатывает событие, всплывающее вверх по дереву DOM.
Вот пример:
<div id="parent">
<div id="child">Click me!</div>
</div>
const parent = document.querySelector('#parent');
const child = document.querySelector('#child');
parent.addEventListener('click', function(event) {
console.log('target:', event.target.id);
console.log('currentTarget:', event.currentTarget.id);
});
child.addEventListener('click', function(event) {
console.log('target:', event.target.id);
console.log('currentTarget:', event.currentTarget.id);
});
В этом примере у нас есть родительский элемент div с id из parent и дочерний элемент div с id из child. Мы прикрепили прослушиватель событий click к родительскому и дочернему элементам.
При щелчке по дочернему элементу событие всплывает к родительскому элементу, также активируя его прослушиватель событий. В этом случае вывод логов консоли будет таким:
target: child currentTarget: parent target: child currentTarget: child
Как видите, свойство target всегда относится к элементу, по которому щелкнули, а свойство currentTarget относится к элементу, который в данный момент обрабатывает событие. В случае прослушивателя родительского события свойство currentTarget относится к родительскому элементу, поскольку это элемент, через который в данный момент распространяется событие. В случае прослушивателя дочерних событий свойство currentTarget относится к самому дочернему элементу, поскольку это элемент, который в данный момент обрабатывает событие.
Спасибо за прочтение, хорошего дня 📝🙌
