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>
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.
Hier wird übrigens ein Event Listener genutzt.
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
Event Handler / Event Listener
Ein EventListener reagiert auf eine Ereignisquelle, z.B. auf die Tastatur oder auf die Maus.
element.addEventListener("click",anyFunction);
Ein Handler reagiert auf ein Ereignis, z.B. auf den Tastendruck oder auf den Mausklick.
element.onclick = anyFunction;
Wenn man mehre gleiche EventHandler auf einem Objekt erzeugt, greift nur der letzte. Er überschreibt die vorigen.
Hat man mehrere Eventlistener werden alle ausgeführt.
