Event: особенности target и currentTarget Напоминаю, что при обработке события, функция-обработчик получает первым аргументом объект события Event, который содержит различные поля, это самое событие идентифицирующие. Одними из таких полей являются свойства target и currentTarget, рассмотрим их поближе: event.target — это тот элемент вёрстки, который вызвал событие. event.currentTarget — это тот элемент вёрстки, к которому прикреплен обработчик события. Скорее всего, из сухих определений мало что можно понять, поэтому рассмотрим пример: <button id="outer"> Outer Button // всегда будем кликать именно на // внутреннюю кнопку <button id="inner">Inner Button</button> </button> const outerButton = document.getElementById('outer'); const innerButton = document.getElementById('inner'); outerButton.addEventListener('click', function(event) { // выведет 'inner', потому что этот элемент вызвал событие console.log('event.target:', event.target.id);' // выведет 'outer', так как обработчик принадлежит именно // внешней кнопке console.log('event.currentTarget:', event.currentTarget.id); // выведет 'outer' }); innerButton.addEventListener('click', function(event) { // ожидаемо увидим 'inner' console.log('event.target:', event.target.id); // также ожидаемо будет 'inner', так как этот обработчик // принадлежит уже innerButton console.log('event.currentTarget:', event.currentTarget.id); }); Тут мы видим, что event.target всегда ссылается на кнопку inner, поскольку именно она и триггерит событие, когда пользователь на нее кликает. В свою очередь, event.currentTarget ссылается именно на тот элемент, чей обработчик сработал. Эта тема крайне тесно связана с событийной моделью браузера, о которой можно прочитать в одном из моих прошлых постов. Различие между event.target и event.currentTarget особенно полезно при работе с вложенными элементами, когда обработчики событий привязаны к родительским элементам, то есть при делегировании событий.