В чем разница между target и currentTarget в Javascript? [Дубликат]

Минимальный пример

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
  <div id="2">2
  </div>
</div>
<div id="result">
  <div>result:</div>
</div>

Когда клик по 2 и отображается на 1, результат:

target: 2
currentTarget: 1

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

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

target = элемент, который вызвал событие.

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>

[object HTMLParagraphElement] [object HTMLDivElement]

Здесь event.target является [объектом HTMLParagraphElement], а event.curentTarget - [object HTMLDivElement]: Таким образом

event.target - это узел, с которого возникло событие, а event.currentTarget, напротив, относится к узлу, на котором был подключен приемник текущего события. Чтобы узнать больше , см. bubbling

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

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

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

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

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