Яка точна різниця між властивістю 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

Випробуваний на Chromium 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 все ще посилається на проміжок. Зауважте: якщо у нас також є слухач подій на тілі, то для цього слухача подій event.currentTarget посилається на тіло (тобто подія, надана як вхід для подій, що оновлюються, щоразу оновлюється кожного разу, коли подія перекидається одним вузлом вгору).