JavaScript/DOM/Event/target

Aus SELFHTML-Wiki
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.

[Bearbeiten] Anwendungsbeispiel

Beispiel ansehen …
  function init() {
	var seite = document.getElementById('body');
	seite.addEventListener('mouseover',findeAuslöser);
	seite.addEventListener('click',findeAuslöser);	
  }
 
  function findeAuslöser(event) { 
	var elem = event.target,
	    name = elem.nodeName;	  
	 document.getElementById('ereignis').textContent = name;
  }
Die Beispielseite erhält im body-Element eine id body. An diese werden mit addEventListener zwei Eventhandler angehängt. Im ersten wird bei mouseover die Funktion findeAuslöser() aufgerufen. Da Touch-Geräte keine Maus haben, wird ein weiterer Eventhandler für das click-Ereignis notiert.
Die Funktion findeAuslöser(event) bestimmt mit Event.target das auslösende Element und weist es der Variablen elem zu. Über die Eigenschaft nodeName wird der Name des Elements ermittelt und mit textContent ausgegeben.

Auch wenn der Eventhandler im body notiert ist, wird hier das jeweilige Element zurückgegeben, das gerade angeklickt wurde. Das Element, das den Eventhandler beinhaltet, können Sie mit currentTarget anzeigen.

[Bearbeiten] Siehe auch

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.

[Bearbeiten] Weblinks


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML