Ereignisse Auf Benutzereingaben reagieren

Transkript

1 Ereignisse Auf Benutzereingaben reagieren JavaScript ermöglicht es dem Entwickler auf Ereignisse (engl.: events) im Browser zu reagieren. Auf diese Weise kann der Benutzer mit den Anwendungen interagieren, über die einfachen Rückgabewerte der Funktion prompt() und confirm() hinaus. Bei diesen Ereignissen kann es sich um den Klick auf einen Button, die Auswahl eines Eintrags aus einer Liste, eine bestimmte Bewegung mit der Maus, das Absenden eines Formulars und vieles mehr handeln. Damit das Programm auf ein Ereignis reagieren soll, muss man eine JavaScript-Funktion entwickeln. Diese enthält die Anweisungen, die im Falle des Ereignisses ausgeführt werden sollen. Dieser Mechanismus wird Eventhandler (Ereignisbehandler) genannt. Mittels der unterschiedlichen Eventhandler reagiert der JavaScript-Interpreter auf verschiedenartige Ereignisse, die der Eventhandler-Mechanismus über festgelegte Namen identifiziert. Ein Eventhandler ist ein Element zur Ereignisbehandlung. Eventhandler stellen damit eine Verbindung zwischen dem HTML-Element, bei dem das Ereignis ausgelöst wird, dem Ereignis selbst und der JavaScript-Funktion her. Überblick über Techniken der Ereignisbehandlung: 1) Die älteste Technik ist die Klassische Ereignisbehandlung. Dabei werden Eventhandler innerhalb von HTML-Elementen angeordnet. Typische Beispiele sind onclick und onload. 2) Event Listener: Bei der Neuentwicklung eines Programms sollte man damit arbeiten! Diese Listener (engl.: to listen = zuhören, horchen) horchen in den Anwendungen auf Ereignisse und sorgen für die Funktionsaufrufe. 1) klassische Ereignisbehandlung: Eventhandler sind das wichtigste Bindeglied zwischen HTML und JavaScript. Ein Eventhandler-Ereignis sieht aus wie jedes gewöhnliche HTML-Attribut. Eventhandler sind in JavaScript Eigenschaften eines Objets Gemeinhin beginnen die Namen von Ereignissen mit der Silbe on, gefolgt von einer sprechenden Beschreibung des Ereignisses. Beispiele: ƒ onmouseover ƒ onload ƒ onclick Ein Beispiel für den Aufruf einer Funktion mit einem HTML-Eventhandler onclick="meinefunktion()" 1a)onclick in einem Link Eberhart JavaScript - EventHandler 1

2 Grundsätzlich gilt Folgendes: Ein Event-Handler beginnt stets mit on. Der Event-Handler, der zuständig ist, wenn auf einen Link geklickt wird, heißt onclick. Wenn folgender Link angeklickt wird, wird ein modales Fenster geöffnet: <a href="irgendwohin.html" onclick="alert('bitte Eingabe durchführen!')">text</a> Vom Prinzip her wunderbar Browser, die JavaScript unterstützen, führen den Code aus, folgen danach aber dem Link. Das href-attribut des Links muss gesetzt werden, sonst wird er nicht angezeigt. Wenn kein Link aufgerufen werden soll, gibt es eine Möglichkeit, einen Link anzugeben, der keine neue Seite lädt: <a href="#" onclick="alert(' Bitte Eingabe durchführen!')">text</a> Beispiel: Hier führt der Link auf eine neue einfache Seite 4.onclicktsst.html, nur um die Funktionsweise zu zeigen. Diese enthält nur eine <h1> Überschrift. Zuerst muss auf den Link geklickt werden Dann erscheint das Alert-Fenster. Nach dessen Bestätigung erscheint die angegebene Seite. 1b)Onclick mit einem Button Funktion mit onclick: mit dem onclick-ereignis auf den Button wird eine Funktion gestartet. Eberhart JavaScript - EventHandler 2

3 Beispiel: erstelle 4.button.html Ergebnis: 2)Event Listener Ähnlich wie Methoden werden auch Ereignisse als Eigenschaften eines Objekts angesehen. Man kann einen Eventhandler einem Objekt als Eigenschaft zuweisen. Jedes HTML-Element eines Dokuments ist ein Objekt, auf das mit Hilfe des Document Object Models (DOM) zugegriffen werden kann. Der Zugriff erfolgt mit Hilfe der DOM-Methode getelementbyid(). Es wird die folgenden Methoden genutzt: addeventlistener() bzw. removeeventlistener() Die Methode addeventlistener() hat drei Parameter: Der erste Parameter beschreibt das Ereignis, allerdings ohne on zu Beginn des Ereignisnamens. Der zweite Parameter verweist auf die auszuführende Funktion. Falls beim dritten Parameter der Wahrheitswert false steht, dann wird das Bubbling- Verfahren angewandt, bei true das Capturing-Verfahren. Stelle auf true Eberhart JavaScript - EventHandler 3

4 Info: Sollte es sich bei dem Browser um eine ältere Version des Internet Explorers handeln, so kennt er die Methode attachevent(). Sie hat nur zwei Parameter, da immer das Bubbling- Verfahren angewandt wird. Beachte, dass der Name des Ereignisses hier wiederum mit on beginnt Beispiel: Ein Button, der auf einen Klick reagiert Im <head> steht im <script>-block die JavaScript-Funktion, die mit Hilfe der Event Listener aufgerufen wird. Im <body> sieht man, dass das HTML-Element nur wenig Platz beanspruchen, da hier nur die IDs stehen und nicht direkt der Eventhandler. Jedem Element, dem ein Eventhandler zugeordnet werden soll, erhält eine eigenen id mit speziellem Namen, z.b. idbutton oder idnachname. Weiter unten im <body> steht im <script>-block dann die Zuweisung der Funktion zu den Eventhandler-Eigenschaften der HTML-Elemente. Der Zugriff erfolgt mit Hilfe der DOM- Methode getelementbyid() und mit addeventlistener(). Ergebnis: Eberhart JavaScript - EventHandler 4

5 Eberhart JavaScript - EventHandler 5

6 Die Historie, Objekt history Das Objekt history arbeitet mit der Historie des Browsers. Man kann: Mit der Methode back() die vorherige Seite anzeigen lassen Mit der Methode forward() die nächste Seite anzeigen lassen, falls man sich schon in der Historie bewegt hat Mit der Methode go() zu einer belieben Seite in der Historie springen, dabei mit einem negativen Wert als Parameter zu einer der vorherigen Seiten und mit einem positiven Wert zu einer der nächsten Seiten. Die Eigenschaft length zeigt die aktuelle Länge der Historie an. Im Head wird geprüft, ob der Browser die jeweilige Methode kennt. Man spricht von der sogenannten Browserweiche. Für den Internet Explorer gilt attachevent() und für andere Browser addeventlistener(). Eberhart JavaScript - EventHandler 6

7 Ergebnis: Quelle: Keydown-Event-Handler jquery JavaScript kann die Tastatur durch Keyboard-Events (Tastaturereignisse) überwachen. Sobald der Nutzer eine Taste auf der Tastatur drückt, wird ein Tastaturereignis erzeugt. Dabei kann man feststellen, welche Taste gedrückt wurde. Diese Information kann man dann im Code verwenden. So kann man z.b. einen Ball nach links, rechts, oben oder unten verschieben, wenn der Nutzer die Links-, Rechts-, Auf- oder Abwärtspfeiltaste drückt. Man verwendet dazu das Ereignis keydown, das jedes Mal ausgelöst wird, wenn der Nutzer eine Taste drückt. Mit jquery fügt man dem keydown-ereignis einen Event-Handler hinzu. Auf diese Weise kann die Event-Handler-Funktion herausfinden, welche Taste gedrückt wurde, sobald ein keydown-ereignis auftritt, und dann entsprechend antworten. Erzeuge die keydown.html Datei: In Zeile 12 wird mit der jquery-funktion $ das body-element ausgewählt und dann wird die Methode keydown aufgerufen. Das Argument der Methode keydown ist eine Funktion, die jedes Mal aufgerufen wird, wenn eine Taste gedrückt wird. Die Informationen über das keydown-ereignis werden durch das event-objekt an die Funktion übergeben. Die Information, welche Taste gedrückt wurde, soll im event-objekt als event.keycode gespeichert werden. Innerhalb der Funktion gibt man mit document.write die Eigenschaft keycode des event- Objektes aus, nämlich eine Zahl. Eberhart JavaScript - EventHandler 7

8 Diese Zahl repräsentiert die gedrückte Taste. Jede Taste auf der Tastatur hat einen eigenen eindeutigen Tastencode. Leertaste: 32 Pfeil nach rechts: 39 Ausgabe im Browser: Eine weitere Tasteneingabe kann nur erfolgen, wenn vorher auf das zurück -Symbol geklickt wurde. Sinn: Eine Ziel für diese Steuerung könnte die Animation eines Balls sein, den man mit den vier Pfeilen auf dem Bildschirm hin- und herschiebt. Quellen: Eberhart JavaScript - EventHandler 8