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

Может кто-нибудь сказать мне точную разницу между currentTargetи targetсвойством в событиях Javascript с примером и какое свойство используется в каком сценарии?

По умолчанию события всплывают по умолчанию, поэтому разница между ними такова:

• target это элемент, который вызвал событие (например, пользователь нажал на)
• 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

Испытано на хроме 71.

Если это не прилипает, попробуйте это:

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

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

Если щелкнуть тег P в приведенном выше коде, вы получите три предупреждения, а если щелкнуть тег div, вы получите два предупреждения и одно предупреждение при нажатии на тег формы. А теперь посмотрите следующий код,

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>
<script>
function fun(event){
  alert(event.target+" "+event.currentTarget);
}

</script>

<form>FORM
  <div onclick="fun(event)">DIV
    <p>P</p>
  </div>
</form>

[объект HTMLParagraphElement] [объект HTMLDivElement]

Здесь event.target - это [объект HTMLParagraphElement], а event.curentTarget - это [объект HTMLDivElement]:

event.target является узлом , из которого возникло событие, и event.currentTarget, напротив, относится к узлу , на котором ток-событие слушателя был attached.To узнать больше см барботирования

Здесь мы нажали на тег P, но у нас есть не слушатель на P, а его родительский элемент div.

event.target - это узел, из которого произошло событие, т.е. где бы вы ни размещали свой прослушиватель событий (в абзаце или промежутке), event.target ссылается на узел (где пользователь щелкнул).

Напротив , event.currentTarget ссылается на узел, к которому был подключен прослушиватель текущего события. То есть. если мы прикрепили наш прослушиватель событий к узлу абзаца, то event.currentTarget ссылается на абзац, а event.target по-прежнему ссылается на span. Обратите внимание: если у нас также есть прослушиватель событий в теле, то для этого прослушивателя событий event.currentTarget ссылается на тело (т. Е. Событие, предоставляемое в качестве входных данных для списков событий, обновляется каждый раз, когда событие поднимается на один узел вверх).