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 load, click, touch 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 der Wert eines Eingabefeldes 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 wie click, mouseover, keypress …

Ein Aufruf wie mouseover (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 ontouch 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 Formulare und ihre Eingabefelder werden vom UI Events W3C Working Draft definiert.

Ereignisse des Browserfensters / Dokuments

• 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

Ereignisse der Tastatur

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.

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.

Video / Audio

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

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.