Warum „event.currentTarget' anstelle von „this' in einer Pfeilfunktion in JavaScript-Ereignishandlern verwenden?

.dies in Pfeilfunktionen: Überlegungen zu Event-Handlern

Bei der Arbeit mit JavaScript können Entwickler auf Herausforderungen stoßen, wenn sie Pfeilfunktionen in Event-Handlern verwenden. Wenn eine Pfeilfunktion in einem Ereignisrückruf verwendet wird, wird es standardmäßig problematisch, diese als Darstellung des Elements zu erhalten, an das der Ereignishandler gebunden ist. Dies liegt daran, dass der Wert davon in einer Pfeilfunktion während der Definition und nicht zum Zeitpunkt ihrer Verwendung bestimmt wird.

Um dieses Problem zu beheben, ist es ratsam, stattdessen event.currentTarget zu verwenden, wenn Pfeilfunktionen verwendet werden innerhalb von Rückrufen. event.currentTarget bezeichnet konsistent das DOM-Element, das dem aktuell ausgeführten Ereignis-Listener zugeordnet ist, und stellt so sicher, dass auf das gewünschte Element genau verwiesen werden kann.

Grundlegendes zu .currentTarget

Die Verwendung von event.currentTarget basiert auf den Konzepten der Ereigniserfassung und -bubbling. Das Verständnis dieser Mechanismen ist entscheidend für die effektive Navigation bei der Ereignisbehandlung in JavaScript.

• event.currentTarget stellt das Element dar, für das der Ereignis-Listener definiert ist, das sogenannte Ereignisziel.
• event.target bezeichnet das Element, das das Ereignis ursprünglich ausgelöst hat.

Event Bubbling and Capturing

Während Durch die Ereignisausbreitung kann das Browserverhalten durch die Verwendung von Ereigniserfassung und Bubbling beeinflusst werden. Beide beinhalten den Fluss von Ereignissen innerhalb des DOM-Baums, jedoch in unterschiedliche Richtungen.

• Event Bubbling: Ereignisse bewegen sich im DOM-Baum nach oben, vom Zielelement zum Stammverzeichnis des Dokuments.
• Ereigniserfassung: Ereignisse bewegen sich im DOM-Baum nach unten, vom Stammverzeichnis des Dokuments zum Zielelement.

Im Kontext der Ereignisbehandlung ist die Unterscheidung zwischen currentTarget und target werden sichtbar. Wenn ein Ereignis an ein übergeordnetes Element delegiert wird und ein Ereignis für ein untergeordnetes Element auslöst, bleibt currentTarget das übergeordnete Element, während target auf das untergeordnete Element verweist. Diese Unterscheidung ist besonders wichtig, wenn es um Elemente geht, die dynamisch erstellt oder in das DOM eingefügt werden, nachdem Ereignis-Listener angehängt wurden.

Beispiel: Unterscheidung von .currentTarget und .target

Betrachten Sie den Snippet unten:

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

Wenn dieser Snippet ausgeführt wird, löst ein Klick auf die untergeordneten oder untergeordneten Elemente das Sprudeln von Ereignissen aus. Das resultierende Verhalten ist in der folgenden Tabelle dargestellt:

Event Listener	this	currentTarget	target
function	child	parent	child/grand-child
jQuery	parent	parent	child/grand-child
Arrow function	undefined	parent	child/grand-child

Wie aus der Tabelle hervorgeht, gibt dies undefiniert zurück, wenn eine Pfeilfunktion verwendet wird, was die Notwendigkeit unterstreicht, stattdessen event.currentTarget zu verwenden. Durch die Verwendung von event.currentTarget kann in Pfeilfunktionen immer auf das richtige Element verwiesen werden, was eine effektive Ereignisbehandlung in JavaScript gewährleistet.

Das obige ist der detaillierte Inhalt vonWarum „event.currentTarget' anstelle von „this' in einer Pfeilfunktion in JavaScript-Ereignishandlern verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!