Initialisierung / onload

Ein Javascript EventHandler wird an ein Objekt gehängt welches man mittels window.document... anspricht. Dabei muss jedoch gewährleistet sein, dass das Element vorhanden ist. Von daher kann man nicht einfach im head Bereich auf ein Element im body zugreifen, denn dieses ist noch nicht geladen. Nun könnte man den Code in verschiedene Blöcke aufteilen, und einen Bereich nach unten setzen. Eine andere Möglichkeit ist eine Initialisierungsfunktion die onload ausgeführt. onload bedeutet das Ereignis tritt ein, wenn alles andere geladen ist.

Siehe dazu dieses Beispiel wir haben eine Javascript Datei, die den gesamten Code enthält. Diese wird im Headbereich der Seite eingebunden. Durch die init() Funktion welche onload() ausgeführt wird, kann man sicher sein, dass alle angesprochenen Elemente vorhanden sind. Alle Events, die es in HTML gibt, kann man auch in Javascript nutzen und noch einige mehr. Siehe auch das Thema Referenz auf Funktion

window.onload

Scriptdatei meinJavascript.js

function showInfo(){
document.getElementById("box").innerHTML = "Touch me Baby touch me.";
}

function deleteInfo(){
document.getElementById("box").innerHTML = "Oh la la";
}

function init(){
document.getElementById("touchButton").onmouseover = showInfo;

document.getElementById("touchButton").onmouseout = deleteInfo;
}

window.onload = init;

HTML Markup im Head Bereich

<script src="meinJavascript.js" charset="utf-8"></script>

Text im div id="box"

DOMContentLoaded

Eine andere Möglichkeit besteht darin den Event DOMContentLoaded zu benutzen. Im folgenden Script wird alles in eine anonyme Funktion eingeschlossen, die für das DOMContentLoaded Event registriert wird.

document.addEventListener("DOMContentLoaded", function(){
	
document.getElementById("info").style.color = "#fa0";
	
});

Die Anweisung in der Funktion ändert eine CSS Eigenschaft für ein Element mit der id info. mehr dazu


Javascript Tipps