Apa perbedaan persis antara properti currentTarget dan properti target dalam javascript

Adakah yang bisa tolong beri tahu saya perbedaan persis antara currentTargetdan targetproperti dalam peristiwa Javascript dengan contoh dan properti mana yang digunakan dalam skenario mana?

Pada dasarnya, peristiwa menggelembung secara default sehingga perbedaan antara keduanya adalah:

• target adalah elemen yang memicu acara (misalnya, pengguna mengklik)
• currentTarget adalah elemen yang dilampirkan oleh pendengar acara.

Lihat penjelasan sederhana di posting blog ini .

target = elemen yang memicu acara.

currentTarget = elemen yang memiliki pendengar acara.

Contoh runnable minimal

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>

Jika Anda mengklik:

2 click me as well

kemudian 1dengarkan itu, dan tambahkan hasilnya:

target: 2
currentTarget: 1

karena dalam hal itu:

• 2 adalah elemen yang memulai acara
• 1 adalah elemen yang mendengarkan acara tersebut

Jika Anda mengklik:

1 click me

sebagai gantinya, hasilnya adalah:

target: 1
currentTarget: 1

Diuji pada Chromium 71.

Jika ini tidak lengket, coba ini:

saat ini di currentTargetmengacu pada saat ini. Itu target terbaru yang menangkap peristiwa yang menggelegak dari tempat lain.

<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>

Jika klik pada tag P dalam kode di atas maka Anda akan mendapatkan tiga peringatan, dan jika Anda mengklik tag div Anda akan mendapatkan dua peringatan dan satu peringatan tunggal pada mengklik tag formulir. Dan sekarang lihat kode berikut,

<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>

[objek HTMLParagraphElement] [objek HTMLDivElement]

Di sini event.target adalah [objek HTMLParagraphElement], dan event.curentTarget adalah [objek HTMLDivElement]: Jadi

event.target adalah simpul dari mana peristiwa itu berasal, dan event.currentTarget, sebaliknya, mengacu pada simpul di mana pendengar peristiwa saat ini dilampirkan. Untuk tahu lebih banyak lihat menggelegak

Di sini kita mengklik pada tag P tetapi kita tidak memiliki pendengar pada P tetapi pada div elemen induknya.

event.target adalah simpul dari mana peristiwa itu berasal, yaitu. dimanapun Anda menempatkan pendengar acara Anda (pada paragraf atau rentang), event.target merujuk ke simpul (tempat pengguna mengklik).

event.currentTarget , sebaliknya, mengacu pada simpul tempat pendengar kejadian saat ini dilampirkan. Yaitu. jika kita melampirkan pendengar acara kami pada node paragraf, maka event.currentTarget merujuk ke paragraf sementara event.target masih mengacu pada span. Catatan: bahwa jika kita juga memiliki pendengar acara di badan, maka untuk acara-pendengar ini, event.currentTarget merujuk ke tubuh (mis. Acara yang disediakan sebagai masukan untuk event-listerners diperbarui setiap kali acara menggelegak satu simpul ke atas).