JavaScript/DOM/Event/DOMContentLoaded

Der DOMContentLoaded-Event-Handler wird ausgelöst, wenn das DOM vollständig aufgebaut, aber noch nicht alle externen Ressourcen wie z.B. Bilder geladen sind.

bubbles	nein
cancelable	nein
mögliche Auslöser	body
Event-Objekt	Event

Beispiel

function registerButtonHandler(e) {
   document.getElementById("theButton")
           .addEventListener("click", function(event) {
      alert("Der Button wurde geklickt");
   });
}

if (document.readyState == "loading")
   document.addEventListener('DOMContentLoaded', registerButtonHandler);
else
   registerButtonHandler();

Das Beispiel zeigt, wie man die Registrierung eines click-Handlers vom Zeitpunkt der Scriptausführung unabhängig macht. Wird das Script bspw. im head des Dokuments eingebunden, wird die Registrierung über den DOMContentLoaded-Eventhandler soweit verzögert, bis das DOM geladen ist. Wird das Script erst später ausgeführt, erfolgt die Registrierung des Click-Handlers sofort. Diese Unterscheidung ist wichtig, denn nachdem der readyState des Dokuments den Zustand "loading" verlassen hat, hat eine Registrierung für das DOMContentLoaded Event keinen Sinn mehr.

Beachten Sie:

• Es gibt für DOMContentLoaded keine entsprechende Objekteigenschaft, dass heißt, eine Überwachung dieses Ereignisses muss immer mit addEventListener erfolgen.

Empfehlung: Verwenden Sie DOMContentLoaded anstelle von load, damit Skripte schon geladen werden, bevor alle Bilder und anderen Mediendateien fertig geladen sind.

Siehe auch

• JavaScript/Tutorials/DOM/Ereignisverarbeitung

Weblinks

MDN: DOMContentLoaded Event