Stil mit {stil}

Jan 2008

Javascript Ereignisse

Ereignisse sind das Herz der interaktiven Programmierung … nicht nur auf Webseiten. Das Drücken einer Taste, ein Mausklick auf einen Button oder das Absenden eines Formulars machen selbst dem Betriebssystem Beine.

Ereignisse sind auch ein wesentliches Moment für die Benutzerfreundlichkeit einer Webseite. Sie teilen dem Besucher mit: »Diese Seite nimmt dich zur Kenntnis und du bewirkst etwas«. Schönstes Beispiel für die Ereignissteuerung auf Webseiten ist das mouseover bei einem Link, über das wir uns keinerlei Gedanken machen müssen: Auch ohne CSS und Javascript mutiert der Mauszeiger zum Händchen.

Das Wechseln eines Bildes beim mouseover oder die schnelle Prüfung von Eingaben in Formularen gehören zu den klassischen Aufgaben für Javascript.

<script type="text/javascript">
function imageOver() {
   if (document.getElementById('i1')) {
      document.getElementById('i1').onmouseover = function() {
         this.setAttribute('src', 'bild02.gif');
      }
      document.getElementById('i1').onmouseout = function() {
         this.setAttribute('src', 'bild01.gif');
      }
   }
}

addEvent( window, "load", imageOver );
</script>
… 
<img id="i1" src="bild01.gif" width="160" height="117" alt="bild01.gif" />

Javascript Event Handler

Event Handler sind Javascript-Anweisungen oder -Funktionen, die beim Eintreten eines Ereignisses handeln – ihre Aktionen durchführen –, z.B. beim Eintreten eines mouseover das src-Attribut des img-Tags austauschen.

Dazu müssen das Ereignis und das Objekt, auf dem das Ereignis stattfindet, einem Registrar gemeldet werden.

              +----- Element, auf dem Ereignisse abgefangen werden sollen
              |
              |                     +------ abzufangendes Ereignis
              |                     |
              |                     |           + ----- Event Handler
              |                     |           |
              v                     v           v
document.getElementById('i1').onmouseover = function() {

}

Das hier kurz angerissene Vorgehen zum Anmelden von Ereignisse ist nicht die einzige Methode. Das DOM hat uns neuere Methoden der Ereignissteuerung mit Javascript beschert, die aber nicht ohne Weiteres von allen Browsern unterstützt werden.

Standards für das Event Handling

Die Ereignisse für Webseiten werden in der Document Object Model (DOM) Events Specification definiert. Aber das DOM versucht gar nicht erst, alle möglichen Ereignisse zu definieren. DOM Events stellt nur eine gediegene Basis zur Verfügung:

• Ereignisse der Benutzeroberfläche, die der Benutzer durch ein externes Gerät wie der Maus ausgelöst. Beispiele sind onmouseover und onclick.
• Ereignisse des Systems, die das Dokument ändern (wie window.onload und onresize für das Ändern der Fenstergröße)

DOM Level 2 Events definiert keinerlei Tastaturereignisse wie onkeydown und onkeypress – das war noch zu kompliziert für das DOM – und verschiebt die Definition von Tastaturereignissen auf eine spätere Version. Trotzdem sind diese Ereignisse natürlich präsent und lassen sich mit Javascript abfangen und behandeln.

HTML-Ereignisse

Maus-Ereignisse

Ereignisse der Tastatur

Mutations-Ereignisse