JavaScript/DOM/Event/DOMContentLoaded: Unterschied zwischen den Versionen

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.

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.

Siehe auch

• JavaScript/Tutorials/DOM/Ereignisverarbeitung

Weblinks

MDN: DOMContentLoaded Event