Какова точная разница между свойствами currentTarget и target в JavaScript?

В контексте событий в JavaScript, target — это элемент, который вызвал событие (например, элемент, на который пользователь нажал).

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

Таким образом, target может быть любым элементом, вызывающим событие, а currentTarget — это конкретный элемент, обрабатывающий это событие.

Минимально воспроизводимый пример

window.onload = function() {
  var resultElem = document.getElementById('result')
  document.getElementById('1').addEventListener(
    'click',
    function(event) {
      resultElem.innerHTML += ('<div>target: ' + event.target.id + '</div>')
      resultElem.innerHTML += ('<div>currentTarget: ' + event.currentTarget.id + '</div>')
    },
    false
  )
  document.getElementById('2').dispatchEvent(
          new Event('click', { bubbles:true }))
}

<div id="1">1 click me
  <div id="2">2 click me as well</div>
</div>
<div id="result">
  <div>result:</div>
</div>

Если вы кликнете на:

2 click me as well

то элемент 1 обработает этот клик и добавит в результат:

target: 2
currentTarget: 1

потому что в этом случае:

• 2 — это элемент, который инициировал событие
• 1 — это элемент, который прослушивает это событие

Если вы кликнете на:

1 click me

то результат будет:

target: 1
currentTarget: 1

Тестировалось в Chromium 71.

Если это не срабатывает, попробуйте следующее:

current в currentTarget относится к текущему состоянию. Это самый последний элемент, который зацепил событие, поднимающееся откуда-то еще.

В JavaScript event.target — это узел, с которого произошло событие, то есть тот элемент, на который пользователь кликнул. Например, если вы установили обработчик события на элементе абзаца или спане, то event.target будет указывать именно на тот узел, по которому был произведен клик.

С другой стороны, event.currentTarget относится к узлу, к которому был прикреплён текущий обработчик события. То есть, если вы прикрепили обработчик события к узлу абзаца, то event.currentTarget будет ссылаться на абзац, в то время как event.target всё ещё будет указывать на спан.

Важно заметить, что если у вас также есть обработчик события на элементе body, то для этого обработчика event.currentTarget будет указывать на body (т.е. объект события обновляется каждый раз, когда событие «всплывает» к родительскому узлу).

В контексте событий в JavaScript, различие между target и currentTarget очень важно.

• target: Этот атрибут возвращает элемент, на котором произошло событие. Например, если вы кликнули на кнопку внутри контейнера, то target будет указывать на эту кнопку.

• currentTarget: Этот атрибут возвращает элемент, на котором непосредственно установлен обработчик события. Если вы добавили обработчик события на контейнер, то в этом случае currentTarget будет указывать на контейнер, даже если событие произошло на кнопке внутри него.

Вот краткое резюме:

• event.target — элемент, на котором произошло событие.
• event.currentTarget — элемент, на котором установлен обработчик события.

Эта разница особенно важна, когда вы работаете с делегированием событий в JavaScript.