Jaka jest dokładna różnica między właściwością currentTarget a właściwością docelową w javascript

Może ktoś proszę mi powiedzieć dokładnie różnicę pomiędzy currentTargeti targetmienia w imprezach JavaScript z przykładu i których właściwość jest używana w który scenariusz?

Zasadniczo zdarzenia są domyślnie bąbelkowe , więc różnica między nimi jest następująca:

• target to element, który wywołał zdarzenie (np. użytkownik kliknął)
• currentTarget jest elementem, do którego dołączony jest detektor zdarzeń.

Zobacz proste wyjaśnienie w tym poście na blogu .

target = element, który wywołał zdarzenie.

currentTarget = element, który ma detektor zdarzeń.

Minimalny możliwy do uruchomienia przykład

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>

Jeśli klikniesz:

2 click me as well

następnie 1nasłuchuje i dołącza do wyniku:

target: 2
currentTarget: 1

ponieważ w takim przypadku:

• 2 jest elementem, który zainicjował zdarzenie
• 1 to element, który nasłuchiwał wydarzenia

Jeśli klikniesz:

1 click me

zamiast tego wynikiem jest:

target: 1
currentTarget: 1

Testowany na chromie 71.

Jeśli to nie trzyma się, spróbuj tego:

prąd w currentTargetodnosi się do teraźniejszości. To najnowszy cel, który złapał wydarzenie, które wybuchło z innych źródeł.

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

Jeśli klikniesz znacznik P w powyższym kodzie, otrzymasz trzy ostrzeżenia, a jeśli klikniesz znacznik div, otrzymasz dwa ostrzeżenia i jedno ostrzeżenie po kliknięciu znacznika formularza. A teraz zobacz następujący kod,

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

[obiekt HTMLParagraphElement] [obiekt HTMLDivElement]

Tutaj event.target to [obiekt HTMLParagraphElement], a event.curentTarget to [obiekt HTMLDivElement]: Więc

event.target się węzeł, od którego pochodzi zdarzenie i event.currentTarget po przeciwnej odnosi się do węzła, w którym prąd zdarzenia detektor był attached.To zna jeszcze zobaczyć pęcherzyków

Tutaj kliknęliśmy znacznik P, ale nie mamy detektora na P, ale na div jego elemencie nadrzędnym.

event.target to węzeł, z którego powstało zdarzenie, tj. gdziekolwiek umieścisz detektor zdarzeń (w akapicie lub zakresie), event.target odnosi się do węzła (gdzie użytkownik kliknął).

event.currentTarget , przeciwnie, odnosi się do węzła, do którego podłączono detektor bieżących zdarzeń. To znaczy. jeśli dołączyliśmy nasz detektor zdarzeń do węzła akapitu, to event.currentTarget odnosi się do akapitu, podczas gdy event.target nadal odnosi się do zakresu. Uwaga: jeśli mamy również detektor zdarzeń na ciele, to dla tego detektora zdarzenie event.currentTarget odnosi się do body (tzn. Zdarzenie dostarczone jako dane wejściowe do detektorów zdarzeń jest aktualizowane za każdym razem, gdy zdarzenie jest propagowane o jeden węzeł w górę).