JavaScript/DOM/Event

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

JavaScript-Programme bestehen aus zwei Hauptbestandteilen:

  1. Synchroner Code, der beim Aufruf eines Scripts sofort ausgeführt wird
  2. Asynchroner Code, der ausgeführt wird, wenn in der Umgebung, in der JavaScript ausgeführt wird, irgendetwas geschieht.

Es ist Aufgabe des synchronen Codeteils, der Ausführungsumgebung bekanntzugeben, für welche Geschehnisse sich das Script interessiert und welche Funktion aufzurufen ist, um auf das Geschehen zu reagieren.

Der Mechanismus, mit dem JavaScript dies steuert, nennt sich Event, und Objekte, die in einem Browser Geschehnisse mittels eines Events signalisieren können, sind ein EventTarget. Andere Ausführungsumgebungen, wie beispielsweise node.js, verwenden teils andere Mechanismen.

Typische EventTargets sind die Elementobjekte von HTML- oder SVG-Elementen, es gibt aber noch viele mehr. Events auf den Elementobjekten des DOM informieren Sie über Benutzeraktionen mit Tastatur, Maus oder Touchscreen, aber auch über den Fortschritt von asynchron ausgeführten Operationen wie das Laden von Bildern oder der Fortschritt einer Animation.

Die Funktion, die bei Auslösen eines Events aufzurufen ist, ist der event handler. Das DOM übergibt ihm ein Objekt, das Auskunft über die Umstände gibt, die das Event ausgelöst haben. Dieses Objekt verfügt über eine Reihe von Eigenschaften und Methoden, die als die Event-Schnittstelle bezeichnet werden.

Wenn Ihnen das Thema noch ganz neu ist, sollten Sie sich zunächst mit den folgenden Tutorials befassen. Im Anschluss an diese Liste finden Sie eine Übersicht über die Event-Schnittstelle und eine Aufstellung der Events, die im DOM ausgelöst werden können.

Tutorials

… für Anfänger
… für Fortgeschrittene

Die Event-Schnittstelle

Events

A


B


C


D


E

  • emptied (Medien-Datei nicht verfügbar)
  • ended (Ende der Medien-Datei erreicht)
  • error (Element nicht richtig geladen o. Skript läuft fehlerhaft)


F

  • focus (beim Aktivieren)
  • focusin (wenn ein Element angeklickt wird)
  • focusout (wenn ein Element verlassen wird)


G


H


I

  • input (wenn etwas eingeben wird)
  • invalid (Wenn eine Eingabe ungültig ist)


J


K

  • keydown (bei gedrückter Taste)
  • keypress (bei gedrückt gehaltener Taste)
  • keyup (bei losgelassener Taste)


L


M


O

  • offline (nicht mit dem Server verbunden)
  • online (mit dem Server verbunden)


P


R

  • ratechange (Änderung der Abspielgeschwindigkeit)
  • reset (beim Zurücksetzen des Formulars)
  • resize (beim Verändern der Fenstergröße)


S

  • scroll (Dokumentansicht wird entlang der x/y-Achsen verschoben)
  • search (wenn etwas in einem Suchformular gesucht wird)
  • seeked (wenn Nutzer andere Stelle ausgesucht hat)
  • seeking (wenn Nutzer zu anderer Stelle geht)
  • select (beim Selektieren von Text)
  • stalled (Laden des Mediums nicht erfolgt)
  • storage (Speicher-Ereignis)
  • submit (beim Absenden des Formulars)
  • suspend (Ende des Ladens)


T


U

  • unload (beim Verlassen der Datei)


V


W

  • waiting (buffering, wenn gewartet werden muss)
  • wheel (wenn sich das Mausrad bewegt)


Z

  • zoom (Dokument-Zoom-Stufe oder aktueller Maßstab wird geändert)

Allgemeines zu Event-Handlern

Events (Ereignisse) und Event-Handler (Ereignisbehandler) sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Event-Handler werden entweder in Form von HTML-Attributen, besser aber mittels der Methode addEventListener hinzugefügt.

Es gibt in JavaScript bestimmte Anwenderereignisse (events), click etwa für das Ereignis "Anwender hat mit der Maus geklickt". Der Anzeigebereich des HTML-Elements, mit dem der Event-Handler verbunden ist, ist das auslösende Element. Wenn der Event-Handler click beispielsweise in einem Formular-Button notiert wird, wird der damit verknüpfte JavaScript-Code nur dann ausgeführt, wenn der Mausklick im Anzeigebereich dieses Elements erfolgt.

Empfehlung: Gemäß den Regeln des unaufdringlichen JavaScript sollten Event-Handler in der Regel nicht als HTML-Attribute, sondern dynamisch mit addEventListener an HTML-Elemente angehängt werden.