237
Kapitel 11
JavaScript-Ereignisse
und der Browser
In diesem Kapitel:
Fensterereignisse verstehen 238
Besucherinformationen erkennen 243
Fenster öffnen, schließen und in der Größe ändern 247
Timer 250
Übungen 252
238
Kapitel 11: JavaScript-Ereignisse und der Browser
Nachdem Sie dieses Kapitel gelesen haben, sind Sie in der Lage:
das ältere Ereignismodell zu verstehen
das JavaScript-Ereignismodell des W3C zu verstehen
Ereignishandler mithilfe von JavaScript zu einer Webseite hinzuzufügen
neue Fenster mithilfe von JavaScript zu öffnen
neue Registerkarten in einem Webbrowser zu öffnen
einen Zeitgeber (Timer) mithilfe von JavaScript zu erzeugen
Fensterereignisse verstehen
Die bisherigen Kapitel haben bereits einige Beispiele für die Ereignisbehandlung vorgestellt, um auf Benut-
zeraktionen oder Dokumentereignisse zu reagieren. Zur Wiederholung: Die Ereignisse des Window-Objekts
umfassen mouseover() und mouseout() sowie load() und click(). Diese Ereignisse sind quer durch alle Brow-
ser recht gut standardisiert, während andere Ereignisse und die Ereignisbehandlung nicht so einfach zu
implementieren sind. Dieser Abschnitt untersucht Ereignisse und wie sie sich in der JavaScript-Program-
mierung verwenden lassen.
Die Ereignismodelle
Die erste Herausforderung beim Thema Ereignisse besteht darin, die beiden unterschiedlichen Modelle zu
verstehen: das von Windows Internet Explorer vor Version 9 verwendete Modell und das Modell, das vom
W3C (World Wide Web Consortium) definiert wurde. Ein älteres Modell – das frühere DOM 0 (Document
Object Model 0) – umfasst die Ereignisse, die Sie in den bisherigen Kapiteln schon kennengelernt haben.
(Eine kurze Einführung zu DOM 0 hat Kapitel 1 gebracht.) DOM 0 ist das Modell mit der höchsten brow-
serübergreifenden Kompatibilität und wird von allen JavaScript-fähigen Browsern unterstützt. In diesem
Abschnitt gebe ich einen kurzen Überblick über das DOM 0-Ereignismodell und untersuche dann die
konkurrierenden W3C- und Internet Explorer-Ereignismodelle.
Verwendung des DOM 0-Modells
Das DOM 0-Ereignismodell ist das bei weitem am einfachsten zu verwendende Modell (wie Sie bereits in
vorherigen Kapiteln gelernt haben) und es weist die beste Kompatibilität für die Ereignisbehandlung in
JavaScript auf. (Wie bereits erwähnt, wird es in allen wesentlichen Webbrowsern unterstützt.) Warum
verwendet man dann nicht einfach das DOM 0-Ereignismodell überall? Der Grund ist einfach: Es ist für
eine komplexe Ereignisbehandlung nicht genügend flexibel. Zum Beispiel ist das DOM 0-Modell nicht in
der Lage, mehrere Ereignisaktionen für dasselbe Element zu verarbeiten. Dennoch ist es keineswegs ver-
kehrt, dieses Modell für einfache Skripts zu verwenden, wie es auch in den bisherigen Beispielen im Buch
der Fall gewesen ist.
Das DOM 0-Ereignismodell umfasst etliche Ereignisse, die mehrere HTML-Tags als Reaktion auf verschie-
dene Benutzeraktionen oder Zustandsänderungen auslösen. Tabelle 11.1 beschreibt die einzelnen Ereignisse.
Fensterereignisse verstehen
239
Ereignisname Beschreibung
onblur() Das Element hat den Fokus verloren (ist also nicht durch den Benutzer ausgewählt)
onchange() Das Element hat den Fokus entweder geändert (z. B. weil ein Benutzer Text in ein Textfeld eingegeben hat)
oder verloren
onclick() Ein Element wurde mit der Maus angeklickt
ondblclick() Auf ein Element wurde mit der Maus doppelt geklickt
onfocus() Das Element hat den Fokus erhalten
onkeydown() Eine Taste auf der Tastatur wurde gedrückt (im Unterschied zu losgelassen), während das Element den
Fokus besitzt
onkeypress() Eine Taste auf der Tastatur wurde gedrückt, während das Element den Fokus besitzt
onkeyup() Eine Taste auf der Tastatur wurde losgelassen, während das Element den Fokus besitzt
onload() Das Element (ein Dokument, ein Frameset oder ein Bild) wird geladen
onmousedown() Eine Maustaste wird gedrückt
onmousemove() Die Maus wird bewegt
onmouseout() Der Mauszeiger wird aus einem Element heraus oder von einem Element weg bewegt
onmouseover() Der Mauszeiger befindet sich über einem Element
onmouseup() Eine Maustaste wird losgelassen
onreset() Das Formularelement wird zurückgesetzt, beispielsweise wenn ein Benutzer eine Rücksetzen-Schaltfläche
auf einem Formular anklickt
onresize() Die Größe des Fensters wird geändert
onselect() Der Text eines Formularelements wird ausgewählt
onsubmit() Das Formular wird abgesendet
onunload() Das Dokument oder Frameset wird entladen
Tabelle 11.1 DOM 0-Ereignisse
Neuere Ereignismodelle: W3C und Internet Explorer
Das W3C hat ein Ereignismodell kodifiziert, das eine leistungsfähige Ereignisbehandlung ermöglicht, und
fast alle neueren Versionen der großen Browser unterstützen es – außer Internet Explorer vor Version 9, der
ein anderes Modell verwendet. Da sich das standardmäßige W3C-Ereignismodell und das ältere Internet
Explorer-Ereignismodell unterscheiden, müssen Sie dies in jedem JavaScript berücksichtigen, das eines
dieser Konzepte zur Ereignisbehandlung verwendet und nicht nur den vom DOM 0-Ereignismodell ver-
wendeten Ansatz.
Konzeptionell sind sich die Ereignisbehandlungen in den W3C- und Internet Explorer-Modellen ähnlich. In
beiden Modellen registrieren Sie zuerst das Ereignis, wobei Sie dem Ereignis eine Funktion zuordnen.
Tritt ein registriertes Ereignis auf, wird die Funktion des Ereignisses aufgerufen. Allerdings gibt es zwischen
ihnen einen wichtigen Unterschied in Bezug auf den Ort, an dem das Ereignis auftritt.

Get JavaScript - Schritt für Schritt now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.