Einige Ereignisse betreffen das gesamte Dokument oder das gesamte Browser-Fenster. So gibt es beispielsweise das Ereignis onload, welches eintritt, nachdem ein HTML-Dokument mit all den darin referenzierten Ressourcen vollständig geladen ist. Im Dokumentmodell von HTML5 gibt es die Objekte window und document, auf deren Ebene solche Ereignisse behandelt werden können. In Form von HTML-Attributen werden diese Event-Handler im einleitenden <body>-Tag notiert.

Beispiel: HTML-Dokument

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ereignisse für Fenster und Dokument</title>
<script>
var now = new Date();
var start = now.getTime();
var max = 5 * 60;
var elapsed = 0;
var saveElapsed = 0;
var expires = new Date(now.getTime() + (1000 * 60 * 60 * 24 * 7));
if(document.cookie) {
   var valStart = document.cookie.indexOf("=") + 1;
   var valEnd = document.cookie.indexOf(";");
   if(valEnd == -1)
      valEnd = document.cookie.length;
   saveElapsed = parseInt(document.cookie.substring(valStart, valEnd));
}
 
function showTime() {
   var absSec = Math.round(calcTime());
   var relSec = absSec % 60;
   var absMin = Math.abs(Math.round((absSec - 30 ) / 60));
   var showSec = "" + ((relSec > 9) ? relSec : "0" + relSec);
   var showMin = "" + ((absMin > 9) ? absMin : "0" + absMin);
   document.getElementById('time').innerHTML = showMin + ":" + showSec;
   window.setTimeout("showTime()", 1000);
   if(absSec >= max)
     document.getElementById('time').style.backgroundColor = 'yellow'; 
}
 
function calcTime() {
   var calcNow = new Date();
   elapsed = ((calcNow.getTime() - start) / 1000) + saveElapsed;
   if(elapsed <= max)
     return(elapsed);
   else
     return(max);
}
 
function saveTime() {
   document.cookie =
      "elapsed" + "=" + elapsed + "; expires=" + expires.toGMTString() + ";";
}   
 
function errorInfo() {
   document.getElementById('time').innerHTML = "FEHLER!";
   document.getElementById('time').style.backgroundColor = 'yellow';
}
</script>
</head>
<body onload="window.setTimeout('showTime()', 1000)"
      onunload="saveTime()" onerror="errorInfo();">
<b id="time">00:00</b>
<section>
<h1>Übungsaufgabe</h1>
<p>Du hast 5 Minuten Zeit, die nachfolgende Übung zu absolvieren.
Oben siehst du die bisher benötigte Zeit.</p>
<!-- hier die Übungsaufgabe -->
</section>
</body>
</html>

Erläuterung

Das Beispiel zeigt, wie der Rahmen einer Übungsaufgabe aussehen könnte, die der Anwender innerhalb einer bestimmten Zeit absolvieren muss. Der HTML-Teil des Beispiels stellt ein vollständiges HTML-Dokument dar. Das einleitende <body>-Tag enthält drei Event-Handler: onload, onunload und onerror.

Dem Event-Handler onload ist ein etwas kompliziert wirkender Aufruf zugewiesen. Es handelt sich um einen Aufruf der JavaScript-Methode setTimeout(), die zum Fensterobjekt von JavaScript gehört. Sie ermöglicht es, eine Anweisung zeitverzögert auszuführen. Als erster Parameter wird die gewünschte JavaScript-Anweisung angegeben, und als zweiter Parameter die Anzahl Millisekunden für die zeitverzögerte Ausführung. Im Beispiel wird die Funktion showTime() mit einer Verzögerung von 1 Sekunde (1000 Millisekunden) aufgerufen.

Die Funktion showTime() ist im Script-Bereich im Dokumentkopf notiert. Ihre Aufgabe besteht darin, die Minuten und Sekunden, die der Anwender bereits auf der Seite ist, jede Sekunde neu anzuzeigen. Die verstrichenen Minuten und Sekunden werden in dem b-Element ausgegeben, dass unterhalb des <body>-Tags zu finden ist. Das Element ist mit dem Inhalt 00:00 vorbelegt. JavaScript sorgt dafür, dass die Zeit im Sekundentakt hochgezählt wird. Auf die Details der Funktion showTime() wird an dieser Stelle nicht näher eingegangen, ebenso wenig wie auf die der Funktion calcTime(), die innerhalb von showTime() aufgerufen wird. Die Aufgabe der Funktionen besteht darin, die Zeit bis zu einem Maximalwert hochzuzählen. Dieser ist in einer Variablen namens max definiert, die oberhalb der Funktionen mit 5 * 60 initialisiert wird, so dass maximal bis 300 Sekunden, also 5 Minuten, hochgezählt wird. Danach bleibt die Zeitanzeige stehen und wird eingefärbt, um zu signalisieren, dass die Zeit abgelaufen ist.

Der Event-Handler onunload tritt ein, wenn der Anwender die Webseite verlässt. Egal ob durch einen Link oder durch Aufruf einer anderen Seite über Browser-Funktionen. Im obigen Beispiel wird bei diesem Ereignis die Funktion saveTime() aufgerufen, die ebenfalls im Dokumentkopf notiert ist. Ihre Aufgabe besteht darin, die aktuell verstrichene Zeit in einem permanenten Cookie zu speichern. Der Effekt dieser Merkfunktion wird im oberen Teil des Scriptbereichs, oberhalb der Funktion showTime(), genutzt. Da dieser Code nicht in einer Funktion steht, wird er beim Laden der Webseite direkt ausgeführt. Er liest ein eventuell gespeichertes Cookie aus und korrigiert in dem Fall die verstrichene Zeit von 0 auf den Wert, der im Cookie gespeichert ist. Die Zeit läuft also von dem Stand aus weiter, bei dem die Seite zuletzt verlassen wurde.

Der dritte im Beispiel notierte Event-Handler onerror hat nichts direkt mit der Zeitanzeige und ihrer Speicherung zu tun. Dieses Ereignis tritt ein, wenn bei einem JavaScript im Dokument ein Fehler auftritt. Sie können auf diese Weise eine eigene Fehlerbehandlung definieren. Im Beispiel wird die Funktion errorInfo() aufgerufen, die im Dokumentkopf notiert ist. Im Beispiel zeigt diese Funktion der Einfachheit halber in dem Bereich, in dem sonst die laufende Zeitanzeige erscheint, das Wort FEHLER an.

Referenzinformation

Es gibt weitere Event-Handler für Fenster- und Dokumentereignisse. Details siehe Eventreferenz.

Event-Handler für interaktive Elemente « | » Script-Bereiche

Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.