Warum verhält sich „this“ in Pfeilfunktionen innerhalb der Ereignisbehandlung nicht wie erwartet?

Verstehen des Verhaltens von Pfeilfunktionen bei der Ereignisbehandlung in Javascript

Bei der Verwendung von Pfeilfunktionen als Rückrufe bei der Ereignisbehandlung ist es wichtig, Folgendes zu berücksichtigen Unterschied zwischen diesem und event.currentTarget. Bei Pfeilfunktionen bezieht sich dies auf den Kontext, in dem die Funktion definiert ist, nicht auf den Ort, an dem sie verwendet wird. Um auf das Element zuzugreifen, an das der Handler gebunden ist, muss daher stattdessen event.currentTarget verwendet werden.

Unterscheidung zwischen event.currentTarget und event.target

Das Verständnis der Unterscheidung zwischen event.currentTarget und event.target ist für das Bubbling und Erfassen von Ereignissen von entscheidender Bedeutung. event.currentTarget stellt das Element dar, an das die Ereignis-Listener angehängt sind, während event.target das Element bezeichnet, das das Ereignis ursprünglich ausgelöst hat.

Laut Dokumentation: „currentTarget vom Typ EventTarget, schreibgeschützt. Wird zur Angabe des EventTarget verwendet deren EventListener gerade verarbeitet werden. Dies ist besonders nützlich beim Erfassen und Bubbling , wird der Unterschied zwischen der Verwendung von this und event.currentTarget bei der Ereignisbehandlung veranschaulicht:

Wenn ein Ereignis auftritt, breitet es sich durch das DOM aus, beginnend beim Zielelement und im Baum nach oben bis zur Wurzel. Während dieses Prozesses gibt „event.target“ das Element an, das das Ereignis auf jeder Ebene ausgelöst hat, während „event.currentTarget“ das Element darstellt, an das der Ereignis-Listener angehängt ist.

Zusammenfassung

<code class="javascript">var parent = document.getElementById('parent');
parent.addEventListener('click', function(e) {

  document.getElementById('msg').innerHTML = "this: " + this.id +
    "<br> currentTarget: " + e.currentTarget.id +
    "<br>target: " + e.target.id;
});

$('#parent').on('click', function(e) {

  $('#jQmsg').html("*jQuery<br>this: " + $(this).prop('id')
                   + "<br>currenTarget: " + $(e.currentTarget).prop('id') 
                   + "<br>target: " + $(e.target).prop('id'));
});

$('#parent').on('click', e => $('#arrmsg').html('*Arrow function <br> currentTarget: ' + e.currentTarget.id));</code>

Um eine ordnungsgemäße Ereignisbehandlung mit Pfeilfunktionen sicherzustellen, ist es wichtig, den Unterschied zwischen this und event.currentTarget zu verstehen. Mit event.currentTarget können Sie auf das mit dem Ereignis-Listener verknüpfte Element zugreifen, unabhängig vom Kontext, in dem die Pfeilfunktion definiert ist.

Das obige ist der detaillierte Inhalt vonWarum verhält sich „this“ in Pfeilfunktionen innerhalb der Ereignisbehandlung nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!