JavaScript/DOM/Event/target

Der Begriff target ist mehrdeutig.
target (Ziel) bezeichnet

• das HTML-Attribut target
• die gleichnamige Pseudoklasse siehe CSS/Selektoren/target
• die JavaScript-Eigenschaft event.target.

Die Eigenschaft Event.target zeigt das Element an, durch das das Ereignis ausgelöst wurde.

Syntax

element = Event.target;

• element: Name des Elements durch das das Ereignis ausgelöst wurde.

Wenn Sie eine Vielzahl von Elementen haben, bei denen eine Benutzerinteraktion durchgeführt werden soll, ist es einfacher anstelle vieler Eventhandler an den jeweiligen Objekten nur einen an einem Elternobjekt anzuhängen und dann mit Event.target den Auslöser zu ermitteln.

Beachten Sie: Wenn ein Button-Element HTML Elemente enthält, und man im Button auf eines dieser Elemente klickt, hat sich Firefox anders verhalten als beispielsweise Chrome. Im Firefox enthielt e.target immer das Button-Element, in Chrome war es das entsprechende Kind-Element. Mozilla hat diesen Unterschied mit Firefox Version 66 beseitigt. Den Button finden Sie am einfachsten mit Hilfe der closest Methode.

Anwendungsbeispiel

Beispiel ansehen …

 1 document.addEventListener('DOMContentLoaded', function () {
 2   function findeAuslöser(event) { 
 3     var elem = event.target,
 4         name = elem.nodeName;	  
 5     document.getElementById('ereignis').textContent = name;
 6   }
 7   var seite = document.documentElement;
 8   seite.addEventListener('mouseover', findeAuslöser);
 9   seite.addEventListener('click', findeAuslöser);	
10 });

Beim Laden der Seite wird eine anonyme Funktion ausgeführt. Innerhalb dieser wird das HTML-Element in der Variable seite gespeichert und dieses überwacht, ob der Mauszeiger über einem Element schwebt oder in dieses Element geklickt wird (Zeilen 7-9). Wenn ein solches Ereignis festgestellt wird, wird die Funktion findeAuslöser() ausgeführt. Sie bekommt das auslösende Ereignis übergeben (Zeile 2), ermittelt mit event.target das auslösende Element, speichert es in der Variablen elem (Zeile 3), ermittelt mithilfe der Eigenschaft nodeName den Namen des auslösenden Elements (Zeile 4) und schreibt diesen Namen via textContent in den Elementinhalt des Elements mit der ID ereignis (Zeile 5).

Auch wenn der Eventhandler für das HTML-Element registriert ist, wird hier das jeweilige Element zurückgegeben, das gerade angeklickt wurde bzw. über dem der Mauszeiger schwebt. Das Element, für das der Eventhandler registiert ist, können Sie mit currentTarget anzeigen.

Siehe auch

Weitere Beispiele für die Anwendung von Event.target finden Sie hier:

• Einstieg in DOM
  • Ereignisverarbeitung
• Seiteninspektor mit getBoundClientRect()
  Dieser Seiteninspektor baut auf dem obigen Beispiel auf und ermittelt die CSS-Eigenschaften des gerade ausgewählten Objekts

• JavaScript/Tutorials/Spiele/Sum-up Event-Delegation mit Event.target
  In diesem Beispiel können auf einem Spielfeld mehrere Buttons angeklickt werden, Obwohl es nur einen Event-Handler gibt, wird der geklickte Button identifiziert und dessen Wert weiterverarbeitet.

Weblinks

• W3C: Document Object Model Core target
• MDN: Event.target

• molily.de: JavaScript - Verarbeitendes Element und Zielelement (von Mathias Schäfer)