Vorweg
Teilnehmer
Teilnehmer an diesem Kurs müssen die Grundelemente der Programmiersprache JavaScript kennen und wissen, wie man JavaScript in einer HTML Seite einsetzt. Die Grundlagen dazu gibt es in der Doku JavaScript 1: Die Programmiersprache und JavaScript 2: HTML Schnittstelle
Teilnehmer müssen außerdem Grundkenntnisse in HTML und CSS mitbringen. Wer die Doku zu HTML Schnelldurchgang und CSS Schnelldurchgang gelesen hat, sollte weitgehend auf der sicheren Seite sein.
Werkzeuge
Die erforderlichen Werkzeuge für diesen Kurs sind:
- Ein Texteditor
- Ein Browser
Ereignisse
Motivation
JavaScript kann in einer HTML Datei direkt zwischen den Marken <script> und </script> stehen oder als externe Datei über einen Link eingebunden sein.
Egal, wo es steht: Trifft der Browser beim Lesen der Datei auf JavaScript, führt er die gefundenen Anweisungen aus.
Das ist eine klare Sache, aber nicht immer das, was man will. Der Browser liest die Datei i.d.R. einmal, was bedeutet, dass der Code auch nur einmal ausgeführt wird. Und das beim ersten Laden. Danach ist das HTML Dokument tot.
Irgendwelche Routinen, die später oder mehrfach ausgeführt werden sollen, können so nicht abgebildet werden und Interaktion mit dem Benutzer ist schon gar nicht möglich.
Hier kommt das System zu Ereignisbehandlung ins Spiel.
Nachlesen
Event Types
Die verschiedenen Ereignis Typen
Ein Ereignis tritt ein, wenn "etwas" passiert. So trivial das klingt, so trivial ist.
In JavaScript kann ein Ereignis alles Mögliche sein - mit der Einschränkung, dass es in einer Webseite oder zumindest im Browser passiert. D.h. es gibt Ereignisse für "Dokument ist geladen", "Fenstergröße ändert sich", "Maus bewegt sich", "Taste wird gedrückt", aber Dinge wie "Computer wird heruntergefahren", "Druckpatrone ist leer" oder "Neue E-Mail eingegangen" werden in JavaScript nicht als definierte Ereignisse geführt.
Die allermeisten Ereignisse werden direkt durch den Anwender oder den Leser einer Webseite ausgelöst. Wenn sie oder er blättert, einen Knopf drückt oder die Maus bewegt, lösen diese Aktionen ein Ereignis aus.
Daneben gibt es Ereignisse, die vom System erzeugt werden, ohne dass ein Anwender sie direkt auslöst. Oft sind diese Ereignisse zwar die Folge von Anwenderaktionen, sie werden aber selbständig vom System erzeugt, um Zwischen- oder Endzustände einzufangen oder auch, um Fehler zu signalisieren.
Als letztes gibt es noch Ereignisse, die in JavaScript per Programmbefehl ausgelöst werden. Diese letzte Sorte soll hier nicht behandelt werden.
Nachlesen
Beispiele
Es gibt, wie gesagt, unendlich viele Ereignis Typen. Hier werden ein paar der gängigsten vorgestellt.
Window
Events, die an das "Window" Objekt geknüpft sind.
Window Events sind überwiegend Ereignisse, die den Browser und seine Aktionen betreffen.
load- Das Ereignis tritt auf, wenn das Dokument komplett geladen ist, auch alle Bilder. Typischerweise sollte man statt "load" das Ereignis "DOMDocumentLoaded" abfragen, weil das Laden von Bildern unkalkulierbar lange dauern kann.
error- Das Ereignis tritt auf, wenn irgendeine Art von Fehler im Zusammenhang mit dem Laden und Darstellen von Ressourcen auftritt oder wenn ein Script auf einen Laufzeitfehler trifft.
online / offline- Das Ereignis tritt auf, wenn die Netzwerkverbindung weg fällt bzw. wiederhergestellt wird.
Document
Events, die an das "Document" Objekt geknüpft sind.
DOMDokumentLoaded- Das Ereignis tritt auf, wenn das Dokument - im wesentlichen der HTML Teil - geladen ist. Alle Element stehen zur Verfügung. Allerdings sind noch nicht alle CSS Attribute angewendet und Bilder sind noch nicht vollständig geladen.
Document
Events, die an das "Element" Objekt geknüpft sind.
TODO
Event Object
Das Ereignis als Objekt
In JavaScript wird ein Ereignis durch ein Objekt vom Typ Event repräsentiert. Das "Etwas", das, was passiert ist, wird in dem Attribut Event.type eingefangen.
Jedes mal, wenn ein Ereignis auftritt, wird vom System ein Objekt vom Typ Event konstruiert. Ob tatsächlich für jedes eintretende Ereignis ein Objekt konstruiert wird, ist zweifelhaft: Es wird in den meisten Fällen ja gar nicht gebraucht. Aber wenn ein EventHandler für das Ereignis eingetragen wurde, ist das Objekt auf jeden Fall vorhanden, wenn er aufgerufen wird.
Nachlesen
Ereignisbehandlung
Von Außen betrachtet, passieren bei der Ereignisbehandlung folgende Dinge:
-
Ein Ereignis findet statt.
Die JavaScript Engine stellt fest, dass ein Ereignis stattgefunden hat und legt ein Objekt vom Typ event an. -
Ein erzeugtes Ereignis wird abgefangen.
Die JS Engine prüft, ob für das Ereignis ein EventListener existiert. Ein EventListener ist an ein bestimmtes Element und an einen Ereignistyp gebunden und definiert die Behandlung des Ereignisses, den EventHandler. -
Ein erzeugtes Ereignis wird bearbeitet.
Der im EventListeer definiert EventHandler wird ausgeführt. Er bekommt das Erzeugte EventObject und führt eine entsprechende Verarbeitung durch.
Event Handler
Die "Ereignisbehandlungsfunktion"
Ein "EventHandler" ist Funktion, die beim Auftreten eines bestimmten Ereignisses an einer bestimmten Stelle aufgerufen wird.
Es handelt dabei um eine (fast) ganz normale JavaScript Funktion. Der einzige Unterschied zu anderen Funktionen ist, dass sie beim Aufruf von der JavaScript Engine immer das auslösende Ereignis als einziges Argument übergeben bekommt, egal, ob die Funktion damit etwas anfangen kann, oder nicht.
Event Listener
Der "Ereignislauscher"
Ein EventListener "lauscht" darauf, ob auf einem bestimmten Element ein bestimmtes Ereignis auftritt, für das eine Behandlungsroutine registriert ist. Wenn das Ereignis eintritt, wird die Behandlungsroutine aufgerufen.
Ein "EventListener" ist keine Funktion im Sinne einer function, sondern eine interne Funktionalität von JavaScript, die definiert und parametrisiert werden kann.
Die Bestandteile eines EventListeners sind:
- ein Element
- ein Ereignistyp
- ein EventHandler
Mit diesen drei Informationen wird ein EventListener versehen, wenn er angelegt wird. Diese Informationen braucht man auch, wenn man einen EventListener wieder löschen will.
Für die eindeutige Identifikation eines Listeners wird theoretisch noch ein vierter Parameter (useCapture) benötigt, der hier nicht weiter beschrieben wird. Seine Bedeutung ist zweifelhaft und nur für Spezialisten interessant und da er außerdem sowohl beim Anlegen als auch beim Löschen mit dem selben Fehlwert belegt wird, kann er im Alltag ignoriert werden.
Ein EventListener kann für alle Elemente definiert werden, die Ziel eines Ereignisses sein können. Das sind alle Objekte in JavaScript die irgendwie das Interface EventTarget implementieren, was wiederum auf alle Objekte zutrifft, die z.B. eines der Interfaces Node, Document, Element etc. implementieren oder davon abgeleitet sind.
EventListener implementieren
3 Wege, einen EventListener zu implementieren
Es gibt technisch 3 verschiedene Möglichkeiten, einen EventListener anzulegen.
Methode 1: Als Attribut eines HTML Elementes
Hier wird im HTML Dokument ein EventListener direkt als Attribut eines HTML Elementes definiert. Jedes gängige HTML Element kann mit einem EventListener für ein oder mehrere Ereignisse direkt in HTML versehen werden.
Syntax: Typischer Fall als Attribut in HTML.
<button id="XX" onclick="someFunction();">Klick mich</button>
Dieser Code kann in einem HTML Dokument auftauchen und macht ziemlich genau das, was da steht:
Wenn der Button mit der Id "XX" geklickt wird, dann wird die Funktion "someFunction()" aufgerufen. (Diese Funktion muss irgendwo in einem JavaScript Abschnitt definiert sein.)
Zu beachten ist, dass bei der Definition korrekter JavaScript Code angegeben werden muss.
Methode 2: Als Attribut eines JavaScript Elementes
Das gleiche Ergebnis kann man per JavaScript erreichen.
Syntax: Typischer Fall als Zuweisung in JavaScript.
document.getElementById("XX").onclick = someFunktion;
Diese Methode ist reiner JavaScript Code und kann an beliebiger Stelle in einem JavaScript Programm auftauchen.
Im Unterschied zur Methode 1 befinden wir uns hier schon in der JavaScript Engine. Dem Attribut onklick des JavaScript Elements, das mit getElementById() identifiziert wurde, wird die Adresse der Funktion zugewiesen, die als EventHandler dienen soll.
Benutzt man diese Methode für ein HTML Element, dem schon per "onclick" - egal, ob in HTML oder in JavaScript - eine EventHandler zugewiesen wurde, so wird die alte Definition ersetzt.
Methode 3: Die Funktion addEventListener()
Die Funktion addEventListener() ist die allgemeine und immer anwendbare Methode. Auch wenn sie im ersten Moment komplizierter aussieht und etwas mehr Schreibarbeit erfordert, sollte sie im Prinzip immer gegenüber den beiden Anderen den vorgezogen werden.
Syntax: Typischer Fall als Implementierung mit "addEventListener".
document.getElementById("XX").addEventListener("click", someFunktion);
Die Funktion addEventListener() wird als Methode für ein bestimmtes Element aufgerufen und erhält als Argumente den Ereignistyp und die Funktionsadresse des EventHandlers.
Mit addEventListener() können beliebig viele Listener für denselben Ereignistyp an ein Element angehängt werden. Existierende Listener werden dabie nicht vernichtet.
addEventListener()
Der allgemeine Weg, einen EventListener hinzuzufügen
addEventListener() ist im Interface EventTarget hinterlegt, das von allen anderen Interfaces implementiert wird, die irgendetwas mit "Elementen" zu tun haben, inklusive Document, Element und HTMLElement
Nachlesen
removeEventListener()
Einen EventListener entfernen
Mit der Funktion removeEventListener() kann ein EventListener unter bestimmten Umständen wieder entfernt werden.
Um das gleich vorweg zu sagen: Nicht alle definierten EventListner können auch wieder gelöscht werden. Es können nur Listener entfernt werden, die auf eine explizit deklarierte Funktion als EventHandler verweisen. Anders herum gesagt: EventListener mit einer anonymen Funktion als EventHandler können nicht wieder entfernt werden. Tja.
Nachlesen