JavaScript/DOM/Event/DOMContentLoaded

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Event
Wechseln zu: Navigation, Suche

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

Weblinks

MDN: DOMContentLoaded Event