JavaScript/DOM/Event/target

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Event
Wechseln zu: Navigation, Suche

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

  • DOM 2.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

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 Eventhandlern an den jeweiligen Objekten nur einen an einem Elternobjekt anzuhängen und dann mit event.target den Auslöser zu ermitteln.

Anwendungsbeispiel[Bearbeiten]

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[Bearbeiten]

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

  • JavaScript/Tutorials/Grundlagen des DOM 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[Bearbeiten]