Wir haben bereits die drei Phasen von ereignisbasierten Scripten kennengelernt. Die zweite Phase tritt ein, wenn das Dokument fertig geladen ist und der DOM-Elementbaum des Dokuments vollständig aufgebaut ist.
Ein Script sollte dem Dokument so schnell wie möglich Interaktivität hinzufügen. Sobald der Zugriff auf den gesamten DOM-Baum möglich ist, sollte ein Script die Ereignis-Überwachung starten und notwendige Änderungen vornehmen. Dies ist gewährleistet, wenn wir das Script ans Dokumentende stellen. Ein solches Script hat automatisch Zugriff auf alle Elemente, die vor ihm notiert sind.
Falls das Script an einer anderen Stelle eingebunden wird, beispielsweise im Dokumentkopf, so hat es nicht direkt Zugriff auf alle gewünschten Elemente. Es muss stattdessen warten, bis das Dokument fertig geladen ist und der DOM-Baum aufgebaut ist.
Es gibt ein Ereignis, das eintritt, sobald der Parser den gesamten HTML-Code eingelesen hat und der komplette DOM-Baum für JavaScripte zugänglich ist: DOMContentLoaded.
Das folgende Beispiel demonstriert das DOMContentLoaded-Ereignis:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Dokument mit Script im Kopf</title>
<script>
function clickHandler() {
window.alert('Button wurde geklickt!');
}
function dokumentGeladen(event) {
window.alert('Dokument wurde geladen! Zugriff auf das komplette DOM möglich.')
document.getElementById('interaktiv').addEventListener('click', clickHandler, false);
}
document.addEventListener('DOMContentLoaded', dokumentGeladen, false);
</script>
</head>
<body>
<button id="interaktiv">
Dies ist ein Button ohne Bedeutung, aber mithilfe von JavaScript können wir ihn
interaktiv gestalten. Klicken Sie diesen Button einfach mal mit der Maus an!
</button>
</body>
</html>
Wir kennen den Grundaufbau des Beispiels bereits. Das Dokument enthält einen Button, der JavaScript-Interaktivität erhalten soll.
Da sich das Script im Dokumentkopf und nicht am Dokumentende befindet, können wir jedoch nicht sofort mit document.getElementById('interaktiv') auf den Button zugreifen. Wir müssen erst warten, bis der DOM-Baum zur Verfügung steht.
Daher registrieren wir zunächst einen Event-Handler für das DOMContentLoaded-Ereignis. Der DOM-Knoten, bei dem das Ereignis passiert, ist document. Daher rufen wir document.addEventListener(…) auf und übergeben die für addEventListener üblichen Parameter. Als Handler-Funktion wird dokumentGeladen angegeben.
Die Funktion dokumentGeladen wird ausgeführt, sobald der DOM-Baum verfügbar ist. Darin können wir nun den Button ansprechen und einen click-Handler registrieren. Der Rest des Beispiels ist wie gehabt.
Beachten Sie, dass die Groß- und Kleinschreibung beim Ereignisnamen von Bedeutung ist. Sie müssen exakt 'DOMContentLoaded' notieren. Eine andere Schreibung führt nicht zum Erfolg.
Alle Browser, die den DOM-Events-Standard umsetzen, kennen auch DOMContentLoaded. Für den Internet Explorer vor Version 9 können Sie stattdessen ein Helferscript verwenden: ContentLoaded.js von Diego Perini.
Das besprochene DOMcontentLoaded-Ereignis tritt ein, sobald der HTML-Parser seine Arbeit verrichtet hat und der JavaScript-Zugriff auf alle Elemente im Dokument möglich ist. Dies ist entkoppelt vom Laden des Dokuments, wie es der Benutzer wahrnimmt.
Um das Dokument erstmalig zu rendern (anzuzeigen), muss der Browser nämlich das Stylesheet heruntergeladen haben, das im Dokumentkopf verlinkt ist. Manchmal wartet er auch noch auf das Laden spezieller Schriften (Webfonts), die eingebunden sind. Dann kann der Anwender das Dokument schon größtenteils lesen und bedienen.
Es fehlen aber noch Inhalte. Nach dem ersten Rendern werden üblicherweise weitere Ressourcen vom Webserver heruntergeladen. Dazu gehören eingebettete Grafiken, Audio- und Video-Inhalte, Plugins sowie Iframes. Sobald diese Ressourcen teilweise geladen sind, rendert der Browser erneut und aktualisiert die Darstellung.
Es gibt ein JavaScript-Ereignis, das eintritt, wenn all diese Ressourcen vollständig heruntergeladen sind. Es lautet schlicht load und passiert beim globalen window-Objekt. Das folgende Beispiel überwacht das load-Ereignis:
function dokumentVollständigGeladen() {
window.alert('Dokument wurde vollständig geladen!')
}
window.addEventListener('load', dokumentVollständigGeladen, false);
Zwischen dem DOMContentLoaded- und dem load-Ereignis können viele Sekunden liegen. DOMContentLoaded passiert immer zuerst, dann load einige Zeit später.
Seitdem es DOMContentLoaded gibt, ist das load-Ereignis nicht mehr wichtig. In den meisten Fällen sollten Sie Ihre Script beim Eintreten des DOMContentLoaded-Ereignisses starten. Das load-Ereignis können Sie verwenden, um die Geschwindigkeit (Performance) ihrer Seite zu messen oder auf die Größen und die Pixeldaten von Grafiken zuzugreifen.