JavaScript-Programmierung von Kopf bis Fuß

Sie sind hier � 385

Asynchron programmieren

Den ersten Event-Handler erstellen

Events versteht man am besten, indem man einen Handler schreibt und ihn mit

einem realen Event verbindet. Ein paar Beispiele für das Reagieren auf Events,

inklusive des load-Events, haben Sie schon gesehen. Wir haben aber noch nicht

erklärt, wie das Event-Handling tatsächlich funktioniert. Das load-Event für die

aktuelle Seite wird ausgelöst, sobald der Browser alle Inhalte vollständig geladen

und dargestellt hat (und das dazugehörige DOM für die Seite erstellt hat).

Wir wollen uns die einzelnen Schritte einmal ansehen, die für das Schreiben eines

Handlers und seinen Aufruf beim Laden der Seite nötig sind:

2

Nachdem unser Handler fertig ist, müssen wir die Einzelteile

verdrahten, damit der Browser auch weiß, dass es eine Funktion gibt, die

er bei Auftreten des load-Events ausführen soll. Hierfür benutzen wir

die onload-Eigenschaft des window-Objekts, wie hier gezeigt:

window.onload = pageLoadedHandler;

function pageLoadedHandler() {

alert("Ich lebe!");

}

Zuerst müssen wir eine Funktion schreiben, die darauf reagiert, wenn

die Seite vollständig geladen wurde. In unserem Beispiel verkündet die

Funktion der Welt: »Ich lebe!«, sobald das passende Event auftritt.

1

Wir nennen unsere Funktion pageLoadedHandler.

Sie können aber auch gern einen anderen Namen

benutzen.

Das hier wird üblicherweise

als Handler oder Callback

bezeichnet.

Dieser Event-Handler gibt

einfach eine Warnmeldung aus.

Für das load-Event weisen wir den Namen

des Handlers der onload-Eigenschaft des

window-Objekts zu.

Sobald die Seite geladen ist, wird

die Funktion pageLoadedHandler

aufgerufen.

3

Das war’s! Mit diesem Code können Sie sich in der Gewissheit zurücklehnen,

dass der Browser die Funktion, die wir der Eigenschaft window.onload

zugewiesen haben, nach dem Laden der Seite ausführen wird.

Wir werden merken, dass verschiedene

Events auf unterschiedliche Weise einem

Handler zugewiesen werden können.

Ein Handler ist einfach nur eine Funktion.