Javascript Events

Events entstehen durch Benutzeraktionen

Events entstehen mit dem Laden der Seite, werden vom Browser signalisiert und melden automatisch Scrollen, Mausbewegung, jeden Touch, das Drücken einer Taste der Tastatur bis zum Verlassen der Seite. Mit onload, onclick, ontouch und weiteren 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«.

JavaScript arbeitet mit zwei Hauptmethoden, die Ereignisse registrieren:

• Bei einer direkten Zuweisung beginnt nutzt Javascript einen »on«-Präfix.

  document.getElementById("myimg").onclick = function () {
  	// Anweisungen, die beim Klick ausgeführt werden
  }
  

• Die flexiblere Technik ist die Methode addEventListener, der ein String ohne »on« als Name des Events übergeben wird.

  const myimg = document.getElementById("myimg");
  
                          aufgerufene Funktion
    ┌── Element                       │
    │     auf click-Event ──┐         │
    │     warten            │         │
    ▼                       ▼         ▼
  myimg.addEventListener("click", showlarge);
                ▲
                │
                └─── Event Listener
  

Wie und wo entstehen Events?

Nahezu jedes HTML-Element, aber auch der Browser und Geräte wie Maus und Tastatur reagieren auf Ereignisse. Einige Beispiele für Events:

• Der Browser »feuert« ein load-Event, wenn das HTML-Dokument vollständig geladen ist.
• Bilder feuern ein load-Event, wenn sie vollständig geladen wurden.
• Elemente feuern bei einem Klick mit der Maus und bei einer Berührung mit dem Finger (Touch-Event).
• Die Tastatur feuert, wenn eine Taste heruntergedrückt wurde.
• Formularelemente feuern, wenn sich ihr Wert geändert hat.

Events erkennen

Solange eine Webseite im Browserfenster geladen ist, entstehen unzählige Events. Das Erkennen von Vorgängen und Benutzeraktionen ist in Javascript schon fertig vorprogrammiert. Scripte werden also auch noch ausgeführt, nachdem die Seite geladen wurde. Sie werden durch Ereignisse sozusagen aufgeweckt.

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 …

Ein Aufruf wie onmouseover (gleich ob als HTML-Attribut oder fein sauber im Script) horcht auf das Event für das HTML-Element, darum wird der Mechanismus EventListener genannt.

Bei jedem Event kann Javascript Anweisungen oder Funktionen ausführen. Um eine Ereignissteuerung in Gang zu setzen, sind nur wenige Zutaten nötig:

• Fast alle HTML-Elemente können ein Ereignis wie ein mouseover an einen EventListener melden. Eingabefelder von Formularen merken, wenn eine Taste gedrückt und losgelassen wurde.
• Das Skript steuert die Anweisungen oder Funktion bei, die beim Eintreten des Events ausgeführt werden soll.
• Die Funktion wird erst ausgeführt, wenn das Event eintrifft.

Javascript Events als HTML-Attribut

Events arbeiten eng mit HTML zusammen. So eng, dass sie ursprünglich direkt als Attribut in ein HTML-Tag gesetzt wurden – von onclick über onmouseover bis zu touch sind sie immer noch legale HTML-Attribute.

Schreib mal was und klicke dann außerhalb des Eingabefeldes (oder auf »Fertig« auf der Tastatur des Touchscreen):

<textarea id="detect" rows="4" cols="50"  
	  onblur="detect(this.value)">
</textarea>

<script>
function detect(val) {
	document.querySelector('#iknow').innerHTML = 
		'Ich weiß; jetzt schon, was du geschrieben hast: <br> ' + val;
}
</script>

Neuere Versionen von Javascript und das DOM haben 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 und machte das HTML unübersichtlich und unflexibel.

Javascript Event Handler

Das Element, das auf ein bestimmtes Event eine Reaktion auslösen soll, wird mit einem Event Listener identifiziert.

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

…
  ┌──── Element, auf dem das Ereignis 
  │     abgefangen werden soll
  │                        ┌──── abzufangendes 
  │                        │     Ereignis
  ▼                        ▼
myElem.addEventListener ("blur", handleEvent);
                                     ▲
                                     │
            Funktion, die beim Eintreten des
            Events automatisch aufgerufen wird

function handleEvent() {
   console.log("Ereignis blur erkannt");
   …
}

addEventListener wird mit dem erwarteten Event (z.B. blur) und mit der Funktion, die das Event behandelt, aufgerufen. Der Browser weiß jetzt, dass er das Script benachrichtigen soll, wenn das Feld verlassen wird. Erst dann führt das Script die Funktion handleEvent aus.

Neben der Methode addEventListener und der altertümlichen Form eines HTML-Attributs gibt noch weitere Techniken, um das Verhalten beim Eintreten von Events zu steuern.

Events asynchron behandeln

Events entstehen durch eine Aktion des Benutzers – wann sie entstehen, kann kaum vorausgesagt werden. Das Betriebssystem entdeckt ein Event wie den Klick der Maus oder den Touch des Fingers auf dem Touchscreen, leitet es an den Browser und damit an Javascript weiter.

Die Funktion, die das Event bearbeiten soll, hat bis zum Eintreten des Events tatenlos geruht, wacht jetzt auf und handelt beim Eintreten des Events außerhalb des linearen Programmablaufs – asynchron.

User Interface – UI Events

Die Ereignisse für Webseiten werden vom UI Events W3C Working Draft 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

Click-Events werden ohne besonderes Zutun meist automatisch in Touch-Events übersetzt. Touch-Events wurde von Safari für iOS 2 eingeführt, von den anderen Browsern übernommen und vom W3C nachträglich standardisiert.

• 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 drop: 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

Mit HTML-Video können wir Video ohne Plugins einsetzen und mit Javascript-Events steuern.

• 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

Javascript fügt komplexe Animationen aus CSS Keyframes-Animationen zusammen.

• 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 Ressourcen
• 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 Ressource des Manifests gefeuert während die Ressource geladen wird.
• updateready Wird gefeuert, wenn die Ressourcen aufgefrischt worden sind.