Sie sind hier � 503
Anonyme Funktionen, Geltungsbereiche und Closures
Eine Closure per Event-Handler erstellen
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Klick mich!</title>
<style>
body, button { margin: 10px; }
div { padding: 10px; }
</style>
<script>
// Hier kommt der JavaScript-Code hin.
</script>
</head>
<body>
<button id="clickme">Klick mich!</button>
<div id="message"></div>
</body>
</html>
Und jetzt kommen wir zu einer weiteren Möglichkeit, Closures zu erzeugen, dieses Mal mit
einem Event-Handler, was in JavaScript recht häufig vorkommt. Wir beginnen mit einer
einfachen Webseite, die einen Button und ein <div>-Element für die Meldung enthält. Wir
verfolgen, wie oft der Button angeklickt wurde, und geben die Anzahl im <div>-Element aus.
Hier ist der HTML-Code und ein wenig CSS, um die Seite anzulegen. Speichern Sie das unten
Stehende in einer Datei namens »divClosure.html«.
Das hier wollen wir erreichen:
Bei jedem Klick auf den Button
soll die Nachricht im <div>
mit der Anzahl der Klicks
aktualisiert werden.
Als Nächstes schreiben wir den Code. Das ginge für dieses Beispiel sogar ganz ohne
Closures. Wie wir gleich sehen werden, wird der Code durch die Closure nicht nur
kürzer, sondern sogar etwas effizienter.
Nur eine schlichte Webseite …
Mit ein wenig CSS, um die
Seitenelemente mit etwas
Stil zu versehen.
Hier kommt Ihr Code hin.
Hier gibt es einen Button und ein <div>, das die Nachricht enthalten soll,
die bei jedem Klick auf den Button aktualisiert werden soll.
504 Kapitel 11
Eine Closure mit einem Event-Handler verwenden
window.onload = function() {
var count = 0;
var message = "Sie haben mich ";
var div = document.getElementById("message");
var button = document.getElementById("clickme");
button.onclick = function() {
count++;
div.innerHTML = message + count + " Mal angeklickt!";
};
};
Klick mich! ohne eine Closure
Wir wollen uns zuerst ansehen, wie Sie das Beispiel ohne eine Closure
implementieren könnten.
var count = 0;
window.onload = function() {
var button = document.getElementById("clickme");
button.onclick = handleClick;
};
function handleClick() {
var message = "Sie haben mich ";
var div = document.getElementById("message");
count++;
div.innerHTML = message + count + " Mal angeklickt!";
}
Die count-Variable muss global sein. Hätten wir sie lokal für
handleClick definiert (den Event-Handler für den Button),
würde sie stattdessen bei jedem Klick neu initialisiert.
In der Handlerfunktion für das load-Event
holen wir uns das Button-Element und
weisen seiner onclick-Eigenschaft einen
click-Handler zu.
Hier ist die click-Handlerfunktion für den Button.
Die Variable message definieren …
… das <div>-Element aus der Seite holen …
… den Zähler inkrementieren …
… und das <div> mit der Nachricht über
die Anzahl der Klicks aktualisieren.
Die Version ohne Closure sieht völlig in Ordnung aus – bis auf die globale Variable, die
möglicherweise Schwierigkeiten macht. Wir wollen den Code unter Verwendung einer
Closure neu schreiben und herausfinden, wie die beiden Funktionen abschneiden. Wir
zeigen Ihnen hier nur den Code und sehen ihn uns nach dem Test genauer an.
Klick mich! mit einer Closure
Jetzt sind alle Variablen für
window.onload lokal. Probleme mit
Namenskonflikten sind Vergangenheit.
Hier definieren wir den click-Handler
als Funktionsausdruck, der der
onclick-Eigenschaft des Buttons
zugewiesen wird, wodurch wir in der
Funktion auf div, message und count
zugreifen können. (Achten Sie auf den
lexikalischen Geltungsbereich!)
Diese Funktion enthält drei freie Variablen: div, message und
count, also wird für den click-Handler eine Closure erstellt. Der
onclick-Eigenschaft des Buttons wird also eine Closure zugewiesen.
Sie sind hier � 505
Anonyme Funktionen, Geltungsbereiche und Closures
Probefahrt für den Button-Zähler
Jetzt können wir den HTML- und den JavaScript-Code in Ihrer
divClosure.html-Datei zusammenführen und diese einem Probelauf
unterziehen. Rufen Sie die Seite in Ihrem Browser auf und probieren
Sie den Code aus. Die Nachricht im <div>-Element sollte bei jedem
Klick auf den Button aktualisiert werden. Sehen Sie sich den Code
danach noch einmal an und vergewissern Sie sich, dass Sie verstehen,
wie alles funktioniert. Wenn Sie fertig sind, blättern Sie um, und wir
gehen die Sache noch einmal gemeinsam durch.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Klick mich!</title>
<style>
body, button { margin: 10px; }
div { padding: 10px; }
</style>
<script>
window.onload = function() {
var count = 0;
var message = "Sie haben mich ";
var div = document.getElementById("message");
var button = document.getElementById("clickme");
button.onclick = function() {
count++;
div.innerHTML = message + count + " Mal angeklickt!";
};
};
</script>
</head>
<body>
<button id="clickme">Klick mich!</button>
<div id="message"></div>
</body>
</html>
Hier ist unsere Ausgabe.
Aktualisieren Sie
»divClosure.html«
wie hier.
Get JavaScript-Programmierung von Kopf bis Fuß now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
