CSS, HTML und Javascript mit {stil}

Javascript Events

Javascript events: Mouse events, touch events, animation events, load events

Events entstehen mit dem Laden der Seite und melden automatisch Scrollen, Mausbewegung, jeden Touch, das Drücken einer Taste der Tastatur bis zum Verlassen der Seite.

Mit onload, onclick, ontouch und den anderen Ereignissen reagiert Javascript auf Aktionen des Benutzers und steuert den Ablauf des Scripts. Das Erkennen und Reagieren auf Events teilt dem Besucher mit: »Diese Seite nimmt dich zur Kenntnis und du bewirkst etwas«.

Ereignisse sind der Kern aller interaktiven Programme: Das Drücken einer Taste oder der Mausklick auf einen Button machen selbst dem Betriebssystem Beine.

Ein einfaches Beispiel für die Ereignissteuerung in HTML-Seiten ist das mouseover bei einem Link, über das wir uns keiner Gedanken machen müssen: Auch ohne CSS und Javascript mutiert der Mauszeiger zum Händchen.

Das Wechseln eines Bildes beim Mouseover und Prüfen von Eingaben in Formularen gehören seit dem ersten Zucken einer Webseite zu den klassischen Aufgaben für Javascript.

Mouse events und Touch events

Was sind Javascript Events?

Solange eine Webseite im Browserfenster geladen ist, entstehen unzählige Events. Das Erkennen von Vorgängen und Benutzeraktionen ist in Javascript schon fertig vorprogrammiert. Events werden über ein Schlüsselwort angesprochen. Die Schlüsselwörter für Events sind klein geschriebene Wörter, die mit »on« beginnen wie onclick, onmouseover, onkeypress …

Um eine Ereignissteuerung in Gang zu setzen, sind nur wenige Zutaten nötig:

  • Fast alle HTML-Tags können ein Ereignis wie ein mouseover an einen Javascript Event Handler melden. Eingabefelder von Formularen merken, wenn eine Taste gedrückt und losgelassen wurde.
  • Registrare sind die Instanzen, bei denen die Ereignisse für ein HTML-Element angemeldet werden. Im einfachsten Fall ist der Javascript-Befehl wie window.onload oder mydiv.mouseover der Registrar, bei dem ein Event angemeldet wird. Der flexibelste Registrar ist die Javascript-Funktion addEventListener, der in den älteren Version von Internet Explorer (bis einschl. IE8) noch attachEvent heißt.
  • Der Javascript-Programmierer steuert die Anweisungen bei, die beim Eintreten des Events ausgeführt werden: Diese Anweisungen sind die Event-Handler.
clicktouchblurkeyuploadloadchangeelem.onclick = myEventHandler;<button onclick="myEventHandler()"></button>elem.addEventListener ('click', myEventHandler, false);123

Javascript Event Handler

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

Zuerst müssen das Ereignis und das Objekt, auf dem das Ereignis gemeldet werden soll, beim Registrar bekannt gemacht werden.

<textarea id="i1" rows="6" cols="30"></textarea> 

…
              +----- Element, auf dem das Ereignis abgefangen werden soll
              |
              |                  +------ abzufangendes Ereignis
              |                  |
              |                  |           + ----- Event Handler
              |                  |           |
              v                  v           v
document.getElementById('i1').onkeyup = function() {
}
…

Ursprünglich waren Javascript Events ganz normale HTML-Attribute, die direkt in das HTML-Tag geschrieben wurden.

Schreib mal was …
<textarea rows="4" cols="60" 
    onblur="javascript: alert('Ich weiß … ' + this.value)">
</textarea>

Das DOM hat uns eine moderne und bessere Ereignissteuerung mit Javascript beschert, denn diese urspüngliche Form erlaubt nur einfachste Events aus der untersten Schublade des Event Handlings.

User Interface – UI Events

Die Ereignisse für Webseiten werden vom UI Events (formerly DOM Level 3 Events) W3C Working Draft 28 April 2015 definiert. DOM Level 2 Events hatte gar nicht erst versucht, alle möglichen Ereignisse zu definieren und z.B. Ereignisse der Tastatur und Scrollen noch außen vor gelassen.

  • onload wenn der Browser ein Fenster oder die Frames in einem Fenster geladen hat.
  • onunload wenn der Browser ein Dokument aus dem Fenster oder Frame entfernt.
    BODY, (FRAMESET)
  • onresize wenn das Fenster des Dokuments verkleinert oder vergrößert wird.
  • onscroll wenn das Dokument gescrollt wird.
  • onabort wenn das Laden einer Seite abgebrochen wurde, bevor ein Bild vollständig geladen wurde.
  • onerror beim Laden eines fehlenden / fehlerhaften Elements.
    OBJECT, BODY, IFRAME, IMG, SCRIPT, (FRAMESET)
  • onselect wenn der Benutzer einen Text in einem Eingabefeld markiert.
  • onchange wenn ein Eingabefeld den Fokus verliert und sein Wert in der Zeit, in der es im Fokus war, geändert wurde.
  • onreset / onsubmit wenn ein Formular zurückgesetzt bzw. abgeschickt wird
    FORM
  • onfocus wenn ein Element in den Fokus kommt (aktiviert wird), weil der Benutzer auf das Element klickt oder mit der Tastatur zum Element navigiert.
    A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA
  • onblur wenn ein Fenster oder ein Element den Fokus verliert.
    A, AREA, BUTTON, LABEL, SELECT, TEXTAREA
  • onformchange
  • onforminput wenn der Inhalt eines Formularfeldes geändert wird
  • oninput wenn der Inhalt durch eine Benutzerschnittstelle geändert wird
  • onprogress
  • oninvalid
  • oncontextmenu
  • onshow Wenn ein menu-Element als Context-Menü angezeigt wird

Mouse Events

  • onclick wenn eine Maustaste über einem Element gedrückt und an derselben Stelle wieder losgelassen wird.
  • onmousedown wenn der Benutzer eine Taste der Maus über einem Element herunterdrückt.
  • onmouseup wenn eine Maustaste über einem Element losgelassen wird.
  • onmouseover wenn eine Maustaste in ein Element bewegt wird.
  • onmousemove wenn die Maus über einem Element bewegt wird. mousemove feuert bei jedem Pixel, um den die Maus bewegt wird.
  • onmouseout wenn die Maus einem Element herausbewegt wird.
  • ondblclick wenn ein die Maustaste an derselben Stelle doppelt geklickt wird.
  • onmousewheel

Ereignisse der Tastatur

  • onkeydown wenn der Benutzer eine Taste auf der Tastatur herunterdrückt.
  • onkeyup wenn der Benutzer eine Taste auf der Tastatur losgelassen hat.
  • onkeypress wenn der Benutzer eine Taste auf der Tastatur herunterdrückt oder festhält.

Touch-Events

  • touchstart beim Berühren einer Touch-Oberfläche (vergleichbar mit dem mousedown-Event)
  • touchend wenn der Finger gehoben wird (vergleichbar mit einem mouseup)
  • touchleave wenn der Finger die Touch-Fläche verlässt (vergleichbar mit einem mouseout)
  • touchmove wenn sich der Finger über die Touch-Fläche bewegt (vergleichbar mit einem mousemove)

Drag-Events

Drag-Events sind nicht trivial in Hinsicht auf die Vielfalt der Geräte. Das Ziehen mit der Maus soll Elemente im Browserfenster an einen anderen Platz ziehen. Auf Touchscreens ist die Geste des Ziehens für das Scrollen von Webseiten reserviert.

  • ondrag
  • ondragend
  • ondragenter
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop

Video / Audio

  • onpause wenn der Benutzer oder ein Script das Abspielen pausiert
  • oncanplay
  • onplay Wenn das Video gestartet wird
  • oncanplaythrough
  • onplaying Tritt ein, wenn das Video gestartet wurde
  • ondurationchange
  • onvolumechange
  • onended wenn das Video vollständig abgespielt ist
  • onseeked wenn seeking="true" gesetzt ist
  • onseeking
  • onloadeddata wenn das Laden eines Datei beginnt (bevor die Datei vollständig geladen ist)
  • onloadedmetadata wenn die Metadaten wie Abmessungen und Dauer geladen werden
  • onloadstart wenn das Laden der Datei beginnt und die Datei noch nicht vollständig geladen ist
  • onstalled wenn der Browser die Daten aus unbekannten Gründen nicht mehr abrufen kann
  • onsuspend wenn das Laden aus unbekannten Gründen stopt bevor das Element vollständig geladen ist
  • ontimeupdate
  • onemptied z.B. wenn eine Datei durch einen Verbindungsfehler plötzlich nicht mehr verfügbar ist
  • onratechange wenn sich die Playback-Rate ändert (z.B. beim Wechsel zu Zeitlupe oder zum schnellen Vorwärtslauf)
  • onwaiting wenn das Video stopt, weil es den nächsten Frame puffern muss.

Animation Events

  • animationstart Bei Start einer CSS-Animation. Wenn die CSS-Animation mit animation-delay angelegt ist, feuert animationstart, wenn die Verzögerung abgelaufen ist.
  • animationiteration feuert am Ende eines Animationsschritts (Iteration). Bei animation-iteration-count=1 feuer das Event nicht.
  • animationend feuert, wenn die CSS-Animation vollständig abgelaufen ist.

Eigenschaften für Animation-Events: animationName (Read Only) und elapsedTime (Read Only)

Application Cache Events

  • cached wird nach dem erst Cache des Manifests gefeuert
  • checking Das erst Event in der Prozedur. Prüft, ob es ein Update gibt.
  • downLoading Ein Update wurde gefunden und der Browser lädt die Resourcen
  • error Das Manifest gibt 404 oder 410 zurück, der Download ist schiefgelaufen oder das Manifest wurde während des Downloads geändert
  • noupdate Wird nach dem ersten Download des Manifests gefeuert
  • obsolete Das Manifest gibt 404 oder 410 zurück. Der Application Cache wird gelöscht.
  • progress Wird für jede Resource des Manifests gefeuert während die Resource geladen wird.
  • updateready Wird gefeuert, wenn die Resourcen aufgefrischt worden sind.