jQuery von Kopf bis Fuß (German Edition)
vorsichtig sein.
Die Erzeugung von Endlosschleifen kann eine Menge Rechenleistung kosten und den Browser des Benutzers zum Absturz bringen.
Das window-Objekt zur Kontrolle zeitgesteuerter Effekte
Glücklicherweise gibt es mit dem
window
-Objekt von JavaScript eine Möglichkeit, die Kontrolle über Ihre Blitzanimationen wiederzubekommen. Das
window
-Objekt wird jedes Mal erzeugt, wenn der Benutzer ein neues Fenster (oder einen Tab) in seinem Browser öffnet, was viele neue Nutzungsmöglichkeiten in jQuery und in JavaScript eröffnet. In der Welt von JavaScript gilt
window
als globales Objekt. Anders gesagt: Das
window
-Objekt ist das höchste Objekt der JavaScript-Welt.
Angenommen, Sie haben drei Tabs in Ihrem Browser geöffnet. Für jeden Tab erstellt der Browser ein eigenes
window
-Objekt. Dabei funktioniert das
window
-Objekt genau wie die Objekte, mit denen Sie in Kapitel 6 bereits gearbeitet haben. Das heißt, dass es Eigenschaften hat, Event-Handler und Methoden – und die sind sehr praktisch. So können wir die Event-Handler
onblur
und
onfocus
benutzen, um herauszufinden, was der Benutzer auf Browserebene gerade so anstellt.
Das
window
-Objekt besitzt auch eine
timer
-Methode, die Sie benutzen können, um eigene zeitgesteuerte Funktionen auszuführen.
window
besitzt noch deutlich mehr Methoden, aber diese brauchen wir, um die Blitzfunktionen in Ordnung zu bringen.
Aufgepasst
Verwechseln Sie die zum JavaScript-
window
-Objekt gehörenden Event-Handler
onblur
und
onfocus
nicht mit den jQuery-Methoden
blur
und
focus
.
Die jQuery-Methoden
blur
und
focus
sind für die Arbeit mit HTML-Formularfeldern und anderen Elemeten gedacht, nicht mit dem
window
-Objekt.
Wer Macht Was?
Verbinden Sie die Eigenschaften, Event-Handler und Methoden für das
window
-Objekt mit der passenden Beschreibung auf der anderen Seite.
window.name
Stellt fest, ob das Fenster einen Klick, eine Tastatureingabe oder eine andere Art von Eingabe bekommen hat.
window.history
Eine Eigenschaft des
window
-Objekts, die sich auf den Hauptinhalt des geladenen Dokuments bezieht.
window.document
Stellt fest, ob das Fenster den Fokus verliert.
window.onfocus
Eine Methode des
window
-Objekts, mit der eine bestimmte Wartezeit festgelegt werden kann, bevor eine bestimmte Funktion oder andere Anweisung aufgerufen wird.
window.setTimeout()
Eine Methode des
window
-Objekts, um die Wartezeit vor der Wiederholung einer Funktion oder Anweisung zu beenden.
window.clearTimeout()
Eine Methode des
window
-Objekts, um eine bestimmte Wartezeit zwischen wiederholten Aufrufen einer Funktion oder Anweisung zu definieren.
window.setInterval()
Eine Eigenschaft des
window
-Objekts, mit der Sie auf die verschiedenen URLs zugreifen können, die das Fenster im Laufe der Zeit geladen hat.
window.clearInterval()
Eine Methode des des
window
-Objekts, mit der Sie die Wartezeit vor der Ausführung einer bestimmten Funktion oder Anweisung wieder löschen können.
window.onblur
Eine Eigenschaft des
window
-Objekts, mit der Sie den Namen des Fensters lesen oder schreiben können.
Wer Macht Was? Lösung
Kopf-Nuss
Die Event-Handler
onfocus
und
onblur
des
window
-Objekts können feststellen, wenn sich der Fokus eines Fensters ändert. Aber wie kann man auf diese Änderungen reagieren?
Mit onblur und onfocus auf Browser-Events reagieren
Inzwischen wissen wir, dass Sie per
window.onfocus
feststellen können, wenn ein Fenster den Fokus erhält (z. B. wenn ein Benutzer die Seite aktiviert oder per Maus oder Tastatur etwas eingibt). Per
window.onblur
können Sie herausfinden, ob das aktive Browserfenster den Fokus verliert. Aber was können wir mit diesen Events anfangen? Sie können beispielsweise eine Funktion definieren , die auf die
onfocus-
bzw.
onblur
-Events reagiert.
Und hier kommen die Vorteile beim Schreiben eigener Funktionen wirklich zum Tragen. Auf der einen Seite haben Sie ein
window
-Objekt, das Ihnen tonnenweise Informationen über die Aktionen des Benutzers im Browserfenster gibt. Auf der anderen Seite können Sie auf Grundlage der Informationen des
window
-Objekts Ihre eigenen Funktionen definieren. Sie können also eigentlich alles tun, was Sie wollen, sofern Ihnen eine passende Funktion dafür einfällt ...
Probefahrt
Wir wollen die Event-Handler des
window
-Objekts einmal ausprobieren. In den Beispieldateien für Kapitel 7 finden Sie einen Ordner mit dem Namen fenster_tester . Öffnen Sie die Datei fenster_tester.html aus diesem Ordner in Ihrem
Weitere Kostenlose Bücher