Javascript'te currentTarget özelliği ile target özelliği arasındaki kesin fark nedir?

Herkes bana örnek ile Javascript olayları currentTargetve targetözelliği arasındaki kesin farkı söyleyebilir ve hangi senaryoda hangi özellik kullanılır?

Temel olarak, olaylar varsayılan olarak kabarcıklanır , böylece ikisi arasındaki fark:

• target etkinliği tetikleyen öğedir (ör. kullanıcı tıkladı)
• currentTarget olay dinleyicisinin bağlı olduğu öğedir.

Bu blog yazısında basit bir açıklamaya bakın .

target = olayı tetikleyen öğe.

currentTarget = olay dinleyicisine sahip eleman.

Minimal çalıştırılabilir örnek

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>

Tıklarsanız:

2 click me as well

daha sonra 1onu dinler ve sonuca ekler:

target: 2
currentTarget: 1

çünkü bu durumda:

• 2 olayı başlatan öğedir
• 1 etkinliği dinleyen öğedir

Tıklarsanız:

1 click me

bunun yerine, sonuç:

target: 1
currentTarget: 1

Chromium 71 üzerinde test edilmiştir.

Bu yapışmazsa şunu deneyin:

Geçerli olarak currentTargetkarşılık gelir. Başka bir yerden köpüren olayı yakalayan en son hedef.

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

Yukarıdaki koddaki P etiketine tıklarsanız, üç uyarı alırsınız ve div etiketine tıklarsanız, form etiketini tıkladığınızda iki uyarı ve tek bir uyarı alırsınız. Ve şimdi aşağıdaki koda bakın,

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

[nesne HTMLParagraphElement] [nesne HTMLDivElement]

Burada event.target [object HTMLParagraphElement] ve event.curentTarget [object HTMLDivElement] 'dir: Yani

event.target olay kaynaklandığı düğüm ve event.currentTarget, karşısındaki, attached.To daha fazla bilgi hangi akım olay dinleyici düğüm belirtir köpüren bakınız

Burada P etiketine tıkladık, ancak P'de dinleyicimiz yok ama div üst öğesi üzerinde.

event.target , olayın kaynaklandığı düğümdür, yani. olay dinleyicinizi nereye yerleştirdiğiniz (paragraf veya aralık), event.target düğüme (kullanıcının tıkladığı yere) karşılık gelir.

event.currentTarget , tam tersine, geçerli olay dinleyicisinin eklendiği düğümü ifade eder. Yani. olay dinleyicimizi paragraf düğümüne eklediysek, event.currentTarget paragrafa, event.target yine de span'a başvuruyorsa. Not: ayrıca gövde üzerinde bir olay dinleyicimiz varsa, o zaman bu olay dinleyicisi için event.currentTarget gövdeye atıfta bulunur (yani, olay listernerlerine girdi olarak sağlanan olay, olay bir düğümü her yükselttiğinde güncellenir).