Ereignisse in JavaScript

====== JavaScript - Event-Handler ====== ===== Grundlagen zu Events ===== Eine Webseite interaktiv zu gestalten, bedeutet, auf die Aktivitäten des Benutzers zu reagieren. Ein typisches Beispiel ist das Auswerten eines HTML-Formulars. JavaScript ermöglicht dabei das Abfangen von fehlerhaften Eingaben, bevor der Formularinhalt an den Webserver geschickt wird. Dies hilft unnötigen Datentransfer im Internet zu vermeiden, die Server nicht durch Fehleingaben zu belasten und dem Benutzer Wartezeiten zu ersparen. Andere Aktivitäten sind z. B. vom Benutzer ausgeführte Mausbewegungen und -klicks. Diese können verschiedene Operationen auslösen, z. B. das Starten eines Countdowns, das Öffnen weiterer Fenster oder die Anzeige versteckter Grafiken. Im Document-Object-Modell (DOM) besitzen viele HTML-Objekte neben Eigenschaften und Methoden auch Ereignisse (engl.: events), auf die der Browser mit der Ausführung von JavaScript-Anweisungen reagieren kann. Dazu wird ein sogenannter Event-Handler als Attribut im zugehörigen HTML-Tag definiert. Meist wird eine JavaScript-Funktion, die im Kopf des Dokuments definiert wurde, als Aktion des Event-Handlers genutzt. Browser, die JavaScript nicht unterstützen, ignorieren dieses Attribut. \\ \\ ===== Auf Ereignisse reagieren ===== JavaScript-Anweisungen werden oft sofort nach dem Laden einer Webseite ausgeführt. Die Anweisungen einer Funktion werden jedoch nicht sofort aufgerufen, sondern erst nach einem Aufruf der Funktion abgearbeitet. Der Anwender entscheidet, wann die Berechnung gestartet wird, beispielsweise wenn er eine Schaltfläche mit der Bezeichnung Berechnung starten betätigt. JavaScript stellt uns zahlreiche Ereignisse zur Verfügung. Tritt ein bestimmtes Ereignis ein, wird die angegebene Funktion aufgerufen und die enthaltenen Anweisungen werden abgearbeitet. {{:inf:js:js-132-1.jpg?700&direct}} Die am häufigsten verwendete Abfrage ist, ob mit der Maus auf ein bestimmtes Element, z.B. eine Schaltfläche, geklickt wurde. {{:inf:js:js-133-1.jpg?700&direct}} \\ **Beispiel: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/onClick.html|onClick.html}}** Im folgenden Beispiel wird die Funktion ''meidung()'' aufgerufen, sobald der Anwender die Schaltfläche Hier klicken betätigt. Ereignisse in JavaScript

Auf das Ereignis onClick reagieren

Es gibt noch eine Vielzahl anderer Ereignisse, bei denen Sie eine bestimmte Funktion aufrufen können. Die Bezeichnungen der Ereignisse können beliebig groß- oder kleingeschrieben werden, da es sich nicht um JavaScript-Code handelt. Beachten Sie, dass die Browser diese Ereignisse nicht im gleichen Umfang in allen HTML-Tags unterstützen. {{:inf:js:js-134-1.jpg?700&direct}} \\ \\ ===== Eine Webseite laden und verlassen ===== Die Event-Handler ''onLoad'' und ''onUnload'' werden innerhalb des ''''- oder ''''-Tags definiert. Die Ereignisse werden ausgelöst, sobald die Webseite geladen oder verlassen wird. Die Ereignisse eignen sich deshalb, um Besucher zu begrüßen oder beim Verlassen der Webseite eine Umfrageseite einzublenden. Das Ereignis onLoad wird ebenfalls in vielen Webseiten eingesetzt, um Werbefenster einzublenden. **Beispiel: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/onLoad_onUnload.html|onLoad_onUnload.html}}** Beim Laden wird ein Begrüßungsfenster angezeigt. Wenn Sie die Webseite über den enthaltenen Link verlassen, wird ebenfalls ein Meldungsfenster zur Verabschiedung geöffnet. Ereignisabfragen: onLoad und onUnload

Mehrere Ereignisabfragen

Im <body> sind die Ereignisse OnLoad und OnUnload definiert.
Verlassen Sie die Seite, um das Ereignis OnUnLoad auszuführen. \\ \\ ===== Ereignisse bei Grafiken, Links und Ankern ===== Die folgenden Event-Handler können Sie in Bildern, Links und Ankern verwenden. {{:inf:js:js-135-1.jpg?700&direct}} Die Event-Handler ''onAbort'' und ''onError'' werden in Verbindung mit Grafiken benutzt. Sie werden innerhalb des Tags '''' gesetzt und sorgen dafür, dass beim misslungenen Laden einer Grafikdatei dem Benutzer eine Meldung angezeigt wird. Das Ereignis ''Abort'' tritt ein, wenn der Benutzer das Laden einer Grafik unterbricht. Das Ereignis ''onError'' wird ausgelöst, wenn die im HTML-Dokument angegebene Grafik vom Browser nicht geladen werden kann. Der Browser Firefox setzt den Event-Handler onError nicht um und kann damit nicht auf das fehlerhafte Laden von Grafiken reagieren. Der Event-Handler ''onciick'' kann für Links und Grafiken definiert werden und wird ausgelöst, wenn der Benutzer auf einen Link oder eine Grafik klickt. Die Event-Handler ''onMouseOut'' und ''onMouseOver'' reagieren auf Ereignisse, die durch Bewegung mit der Maus ausgelöst werden. Ein ''onMouseOver''-Ereignis tritt ein, sobald sich die Maus über dem festgelegten HTML-Element befindet. Beim Verlassen eines Elements tritt das ''onMouseOut''-Ereignis ein. Das Haupteinsatzgebiet der beiden Ereignisse ''onMouseOut'' und ''onMouseOver'' ist die gemeinsame Verwendung bei einem Rollover-Effekt. Rollover bedeutet, dass eine Grafik sich in dem Moment ändert, in dem die Maus über sie fährt. Verlässt die Maus die Grafik, kehrt die Grafik zur ursprünglichen Anzeige zurück. Diesen Effekt finden wir in den Navigationen vieler Webseiten. \\ **Beispiel: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/onMouse_onError.html|onMouse_onError.html}}** Das Beispiel zeigt, wie Sie einen einfachen Rollover-Effekt erzeugen. Zunächst müssen Sie zwei gleichgroße Grafiken anfertigen, die dann gegeneinander ausgetauscht werden sollen. Ereignisabfragen: onMouseOver, onMouseOut, onError

onMouseOver, onMouseOut, onError

Grafikwechsel

\\ \\ ===== Ereignisse im Formular ===== {{:inf:js:js-137-1.jpg?700&direct}} \\ **Beispiel: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/form_events.html|form_events.html}}** In diesem Beispiel wird ein Formular mit zwei Eingabefeldern für den Namen und den Vornamen erzeugt. Beim Auftreten der Ereignisse ''onFocus'', ''onBlur'' und ''onChange'' wird eine Meldung in der Statusleiste oder ein Meldungsfenster angezeigt. Events im Formular \\ ==== Event-Handler ''onClick'' ==== Die Eingabefelder eines Formulars lassen sich im Zusammenhang mit Event-Handlern auch für andere Zwecke nutzen. Beispielsweise können die Werte der Formularfelder nach dem Betätigen einer Schaltfläche als Eingabe einer Berechnung dienen, deren Ergebnis wiederum in einem anderen Formularfeld ausgegeben wird. **Beispiel: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/volumen_rechner.html|volumen_rechner.html}}** Dieses Beispiel zeigt Ihnen, wie wir nach der Eingabe eines Wertes und der Auswahl einer Maßeinheit die Umrechnungen in andere Maßeinheiten durchführen und die Werte ausgeben. Event: onClick

Volumenmaße berechnen

\\ \\ ===== Formulareingaben testen ===== Eine wesentliche Anwendung von JavaScript ist es, Formulardaten auf Fehleingaben zu prüfen, bevor sie über das Internet versendet werden. Über den Event-Handler ''onSubmit'' können wir vor dem Absenden der Daten auf die Inhalte des Formulars zugreifen. Somit ist schon eine Kontrolle der eingegebenen Daten auf dem Clientrechner möglich, um bei Fehleingaben das Versenden des Formulars zu verhindern. **Beispiel: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/kontaktfomular.html|kontaktfomular.html}}** Das folgende umfangreichere Beispiel zur Prüfung der Formulareingaben zeigt ein Anmeldeformular, das Adressdaten des Benutzers aufnehmen und versenden soll. Das zugrunde liegende Skript gibt bei der Eingabe Hilfestellungen in der Statuszeile, führt vor dem Versenden eine Überprüfung der Formularfelder durch und fragt nach, ob die Felder beim Betätigen der Schaltfläche Zurücksetzen auf die Vorgabewerte gesetzt werden sollen. Außerdem sollen einige Eingabefelder auf korrekte Eingaben überprüft werden. Zum Beispiel dürfen die Telefonnummer und die Postleitzahl keine Buchstaben beinhalten. Zuerst erstellen wir die Webseite mit den einzelnen Formularelementen. Im zweiten Schritt werden im Kopfbereich des HTML-Dokuments die JavaScript-Funktionen zum Auswertendes Formulars eingefügt. Formularauswertung

Anmeldeformular

\\ \\ ===== javaScript: ===== Die Anweisung ''javaScript:'' ist im eigentlichen Sinne kein Event-Handler. Sie erlaubt Ihnen jedoch das Ausführen von einzelnen JavaScript-Befehlen über einen Hyperlink. Deshalb ist dieser Befehl auch nur in Verbindung mit dem HTML-Tag '''' möglich. {{:inf:js:js-145-1.jpg?700&direct}} \\ **Beispiel** Nach dem Klick auf den Hyperlink wird eine Meldung ausgegeben.

Dialogfenster öffnen