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
Ein Überblick
JavaScript kann in dem Dokument direkt zwischen den Marken <script> und </script> stehen oder als Datei über einen externen Link eingebettet sein.
Egal wie, wenn der Browser auf JavaScript trifft, dann führt er die gefundenen Programmzeilen aus.
Das ist eine klare Sache, aber nicht immer das, was man will.
Eine Warnung zu einer falschen Eingabe soll nicht auftauchen, wenn der Browser den dazu gehörenden Code liest, sondern dann, wenn jemand eine falsche Eingabe macht. Das Gleiche gilt für andere Situationen, in denen JavaScript ausgeführt werden soll, wenn etwas bestimmtes passiert, aber nicht unbedingt dann, wenn der Browser die Programmzeilen liest und interpretiert.
Hier kommt das System zu Ereignisbehandlung ins Spiel.
Nachlesen
EventType
Die verschiedenen Ereignis Typen
Ein Ereignis, auf Englisch ein "event", tritt ein, wenn "etwas" passiert. So trivial das klingt, so trivial ist. In JavaScript wird ein Ereignis durch ein Objekt vom Typ Event repräsentiert, das "etwas" wird in dem Attribut Event.type eingefangen.
Der Typ eines Ereignisses kann alles Mögliche sein - alles Mögliche, das in einer Webseite oder zumindest im Browser passieren kann. Es gibt kein Ereignis für "Kaffee ist alle" oder "Computer wird heruntergefahren", aber "Dokument ist geladen", "Fenstergröße ändert sich", "Maus bewegt sich", "Taste wird gedrückt" sind alles definierte Ereignisse, auf die reagiert werden kann.
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, weil mit einer Aktion ein längerer Prozess angestoßen wurde, 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
TODO
Event
Das Ereignis als Objekt
Nachlesen
Ereignisbehandlung
Im Zentrum der Ereignisbehandlung stehen Funktionen, die als sog. EventHandler fungieren und ein Objekt vom Typ Event, das die Eigenschaften eines Ereignisses enthält.
Ein EventHandler ist eine JavaScript Funktion, die automatisch aufgerufen wird, wenn ein bestimmtes Ereignis eintritt.
Ein Event ist ein Objekt, das von JavaScript erzeugt und mit den wesentlichen Infos zu dem Ereignis bestückt wird, um dann an einen geeigneten EventHandler übergeben zu werden.
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 mehrere Möglichkeiten, einen EventListener anzulegen.
Diese Möglichkeiten werden hier kurz vorgestellt. Es gib allerdings nur eine - die letzte unten aufgeführte - Methode, die man in der Praxis nutzen sollte.
Als Attribut eines HTML Elementes
Hier wird im HTML Dokument ein EventListener eingehängt. Jedes gängige HTML Element kann mit einem EventListener für ein oder mehrere Ereignisse direkt in HTML versehen werden.
Ereignisbehandlung: Der Klassiker in HTML codiert.
<button id="XX" onclick="someFunction();">Klick mich</>
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.)
Als Attribut eines JavaScript Elementes
Das gleiche Ergebnis kann man per JavaScript erreichen.
Ereignisbehandlung: Der Klassiker in JavaScript codiert.
document.getElementById("XX").onclick = someFunktion;
Die Methode addEventListener()
addEventListener()
Der allgemeine Weg, einen EventListener hinzuzufügen
Nachlesen
removeEventListener()
Einen EventListener entfernen
Nachlesen