-
Notifications
You must be signed in to change notification settings - Fork 17
/
event-handling-grundlagen.html
252 lines (223 loc) · 24.2 KB
/
event-handling-grundlagen.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Grundlagen zur Ereignisverarbeitung</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
<meta name="viewport" content="width=device-width">
<script src="js-doku.js"></script>
</head>
<body>
<div id="nav">
<p>Hier entsteht eine <strong>JavaScript-Dokumentation</strong> von <a href="http://molily.de/">molily</a>. Derzeit ist sie noch lückenhaft, wächst aber nach und nach. Kommentare und Feedback werden gerne per <a href="mailto:zapperlott@gmail.com">E-Mail</a> entgegen genommen.</p>
<p class="contents-link"><a href="./">Zum Inhaltsverzeichnis</a></p>
</div>
<h1>JavaScript: Grundlagen zur Ereignisverarbeitung</h1>
<div class="section" id="ereignisbasierung">
<h2>Ereignisbasierte Scripte</h2>
<p>Der Abschnitt über die <a href="einbindung.html#ausfuehrung">Verarbeitung von Scripten</a> hat Ihnen gezeigt, dass der Browser Scripte üblicherweise in dem Moment ausführt, in dem er den Code eines HTML-Dokuments herunterlädt, parst und auf ein <code>script</code>-Element trifft.</p>
<p>Der Schicksal von JavaScript ist aber nicht, bloß in diesem kurzen Moment des Ladens des HTML-Dokuments ausgeführt zu werden und dann für immer zur Ruhe zu kommen. Die meisten JavaScripte sollen Interaktivität bieten. Der Schlüssel dazu ist, das haben wir bereits in den <a href="konzepte.html#events">Grundkonzepten</a> kennengelernt, die <strong>Überwachung und Behandlung von Ereignissen</strong> (auch <strong>Event-Handling</strong> genannt).</p>
<p>Moderne Scripte durchlaufen deshalb verschiedene <strong>Phasen</strong>:</p>
<div class="subsection" id="phase-laden">
<h3>Phase Eins: Das Dokument wird empfangen und geparst</h3>
<p>Dabei wird das JavaScript erstmals ausgeführt. Objekte und Funktionen werden dabei definiert, sodass sie für die spätere Nutzung zur Verfügung stehen. – Nicht alle notierten Funktionen werden dabei bereits aufgerufen. – Zu diesem Zeitpunkt hat das Script noch keinen vollständigen Zugriff auf das Dokument.</p>
</div>
<div class="subsection" id="phase-onload">
<h3>Phase Zwei: Das Dokument ist fertig geladen</h3>
<p>Der vollständige Zugriff auf das Dokument über das DOM ist erst jetzt möglich. Nun wird ein Teil des Scripts aktiv, um dem bisher statischen Dokument JavaScript-Interaktivität hinzuzufügen: Das Script spricht vorhandene Elementknoten an und fügt ihnen sogenannte <strong>Event-Handler</strong> hinzu. Das Script kann aber auch den Inhalt oder die Darstellung von bestehenden Elementen verändern und dem Dokument neue Elemente hinzufügen (auch <strong>DOM-Manipulation</strong> genannt).</p>
</div>
<div class="subsection" id="phase-event-handling">
<h3>Phase Drei: Der Anwender bedient das Dokument und das Script reagiert darauf</h3>
<p>Wenn die überwachten Ereignisse an den entsprechenden Elementen im Dokument passieren, so werden gewisse andere Teiles des Scripts aktiv, denn die entsprechenden <strong>Handler-Funktionen</strong> werden ausgeführt.</p>
</div>
<div class="subsection" id="script-struktur">
<h3>Resultierende Script-Struktur</h3>
<p>Dieser chronologische Ablauf gibt die Struktur der meisten Scripte vor:</p>
<ul>
<li>Im Code werden vor allem mehrere Funktionen definiert, die später als <em>Handler</em> Ereignisse verarbeiten werden.</li>
<li>Es gibt mindestens eine Hauptfunktion, die ausgeführt wird, wenn der Browser das Dokument fertig geladen hat, sodass Scripte darauf zugreifen können.</li>
</ul>
<p>Das erste und enorm wichtige Ereignis, mit dem wir uns beschäftigen müssen, ist daher das <strong><code>load</code>-Ereignis</strong>. Es passiert aus JavaScript-Sicht im <a>Fenster</a> beim <code>window</code>-Objekt. Wenn dieses Ereignis eintritt, wird die zweite Phase aktiv. Dem JavaScript steht der gesamte DOM-Baum zur Verfügung, einzelne Elemente werden angesprochen und es werden Event-Handler registriert. Diese elementar wichtige Vorgehensweise bei der JavaScript-Programmierung wird uns nun beschäftigen.</p>
</div>
</div>
<div class="section" id="traditionelles-event-handling">
<h2>Traditionelles Event-Handling</h2>
<p>Die Anweisung, die die Überwachung eines Ereignisses an einem Element startet, nennt man das <em>Registrieren</em> von Event-Handlern. Im Folgenden wird es um die einfachste und älteste Methode gehen, um Event-Handler zu registrieren.</p>
<p>In den <a href="konzepte.html#events">Grundkonzepten</a> haben wir die typischen Bestandteile der Ereignis-Überwachung kennengelernt: Erstens ein Elementobjekt, zweitens den Ereignistyp (z.B. <code>click</code>) und drittens eine Handler-Funktion. Diese drei Bestandteile finden wir in dem Aufbau der JavaScript-Anweisung wieder. Das allgemeine Schema lautet allgemein:</p>
<pre>element.onevent = handlerfunktion;</pre>
<ul>
<li><code>element</code> steht für ein JavaScript-Objekt aus dem Dokument, üblicherweise ein Elementknoten. Es kommen auch besondere Objekte wie <code>window</code> und <code>document</code> in Frage.</li>
<li><code>onevent</code> ist eine Objekteigenschaft, die mit der Vorsilbe <code>on</code> beginnt, auf die der Ereignistyp folgt. <em>on</em> ist die englische Präposition für <em>bei</em>. Zum Beispiel <em>onclick</em> bedeutet soviel wie <em>beim Klicken</em>.</li>
<li><code>handlerfunktion</code> ist der Name einer Funktion. Genauer gesagt steht an dieser Stelle ein beliebiger Ausdruck, der ein Funktionsobjekt ergibt: JavaScript wird diesen Ausdruck auflösen und das Ergebnis als Handler-Funktion verwenden.</li>
</ul>
<p>Insgesamt hat die Anweisung die Form »Führe bei <em>diesem Element</em> beim Eintreten <em>dieses Ereignisses</em> <em>diese Funktion</em> aus.</em>«</p>
<p>Der obige Pseudocode soll nur das allgemeine Schema illustrieren. Es gibt natürlich kein Ereignis namens <code>event</code>, und <code>onevent</code> ist lediglich ein Platzhalter für alle möglichen Eigenschaften, darunter <code>onclick</code>, <code>onmouseover</code>, <code>onkeypress</code> und so weiter.</p>
<p>Betrachten wir ein konkretes Beispiel. Wir wollen nach dem erfolgreichen Laden des Dokuments eine JavaScript-Funktion ausführen. Dazu haben wir bereits das <code>load</code>-Ereignis kennengelernt, dass beim <code>window</code>-Objekt passiert. Angenommen, wir haben eine Funktion namens <code>start</code> definiert, die als Event-Handler dienen wird:</p>
<pre>function start () {
window.alert("Dokument erfolgreich geladen! Wir können nun über das DOM darauf zugreifen.");
}</pre>
<p>Gemäß dem obigen Schema starten wir folgendermaßen das Event-Handling:</p>
<pre>window.onload = start;</pre>
<p>Und schon wird die gezeigte Funktion beim erfolgreichen Laden des Dokuments ausgeführt.</p>
<p>Sie werden sich sicher fragen, wie Ereignis-Verarbeitung auf JavaScript-Ebene funktioniert. Dazu schauen wir uns den Aufbau der besagten Anweisungen an: Wir haben dort eine einfache Wertzuweisung (erkennbar durch das <code>=</code>), die einer Objekteigenschaft (<code>window.onload</code> auf der linken Seite) einen Wert (<code>starte</code> auf der rechten Seite) zuweist. Nach dieser Zuweisung ist die Funktion in der Objekteigenschaft gespeichert. Dies funktioniert, weil Funktionen in JavaScripte auch nur Objekte sind, auf die beliebig viele Variablen und Eigenschaften verweisen können.</p>
<p>Passiert nun ein Ereignis am Objekt <code>window</code>, sucht der JavaScript-Interpreter nach einer Objekteigenschaft, die den Namen <code>on</code> gefolgt vom Ereignistyp trägt (im Beispiel <code>onload</code>). Wenn diese Eigenschaft eine Funktion beinhaltet, führt er diese aus. Das ist erst einmal alles – aber enorm wichtig zum Verständnis des Event-Handlings.</p>
<p>Wie Sie später erfahren werden, ist die oben vorgestellte Methode im Grunde überholt (siehe <a href="event-handling-fortgeschritten.html#traditionell-nachteile">Nachteile und Alternativen</a>). Dieses <em>traditionelle</em> Event-Handling ist aber immer noch der Ausgangspunkt jeder JavaScript-Programmierung. Sie sollten sich dieses Schema und dessen Funktionsweise genau einprägen.</p>
</div>
<div class="section" id="traditionelles-schema">
<h2>Beispiel für traditionelles Event-Handling</h2>
<p>Mit dem Wissen über Ereignis-Überwachung und das <code>load</code>-Ereignis können wir ein Dokument mitsamt eines Scriptes schreiben, das die <a href="#ereignisbasierung">beschriebenen drei Phasen</a> illustriert.</p>
<p>Dazu starten wir mit folgendem einfachen Dokument:</p>
<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Dokument mit JavaScript</title>
<script type="text/javascript"> … </script>
</head>
<body>
<p id="interaktiv">Dies ist ein einfacher Textabsatz, aber mithilfe von JavaScript können wir
ihn interaktiv gestalten. Klicken Sie diesen Absatz doch einfach mal mit der Maus an!</p>
</body>
</html></pre>
<p>Dem <code>p</code>-Element mit der ID <code>interaktiv</code> soll nun per JavaScript ein Event-Handler zugewiesen werden. Ziel ist es, dass eine bestimmte JavaScript-Funktion aufgerufen wird, immer wenn der Anwender auf die Fläche des Element klickt. Das Ereignis, das bei einem Mausklick ausgelöst wird, heißt sinnigerweise <code>click</code>.</p>
<p>Unser Script läuft in drei Schritten ab:</p>
<ol>
<li><strong>Warten, bis das Dokument vollständig geladen ist:</strong> Starte die Überwachung des <code>load</code>-Ereignisses und führe eine Startfunktion aus, sobald das Ereignis passiert.</li>
<li><strong>Einrichtung der Event-Handler:</strong> Die besagte Startfunktion spricht den Textabsatz an und registriert einen Event-Handler für das <code>click</code>-Ereignis.</li>
<li><strong>Ereignis-Verarbeitung:</strong> Die Handler-Funktion, die beim Klick auf den Textabsatz ausgeführt wird.</li>
</ol>
<p>Schritt 1 ist mit der Anweisung erledigt, die wir bereits oben kennengelernt haben:</p>
<pre>window.onload = start;</pre>
<p>Natürlich können wir der Startfunktion auch einen anderen Namen als <code>start</code> geben. Üblich ist z.B. <code>init</code>.</p>
<p>Die Startfunktion für Schritt 2 könnte so aussehen:</p>
<pre>function start () {
document.getElementById("interaktiv").onclick = klickverarbeitung;
}</pre>
<p>Was zunächst kompliziert aussieht, ist nichts anderes als die Anwendung des bekannten Schemas <code>element.onevent = handlerfunktion;</code>.</p>
<p>Zur Einrichtung des Event-Handler greifen wir über das DOM auf das Dokument zu. Dies ist in der Funktion <code>start</code> möglich, denn sie wird beim Eintreten des <code>load</code>-Ereignisses ausgeführt.</p>
<p>Damit der Zugriff auf das gewünschte Element so einfach möglich ist, haben wir einen »Angriffspunkt« für das Script geschaffen, indem wir dem <code>p</code>-Element eine ID zugewiesen haben. Eine solche Auszeichnung über IDs und Klassen (<code>class</code>-Attribute) spielen eine wichtige Rolle, um Angriffspunkte für Stylesheets und Scripte zu bieten.</p>
<p>Mit der DOM-Methode <code>document.getElementById</code> (zu deutsch: <em>gib mir das Element anhand der folgenden ID</em>) können wir das Element mit der bekannten ID ansprechen. Der Aufruf <code>document.getElementById("interaktiv")</code> gibt uns das Objekt zurück, das das <code>p</code>-Element repräsentiert.</p>
<p>Wir arbeiten direkt mit diesem Rückgabewert weiter und weisen dem Elementobjekt nun einen Event-Handler zu. Die Objekteigenschaft lautet <code>onclick</code>, denn es geht um das <code>click</code>-Ereignis. Die auszuführende Handler-Funktion lautet <code>klickverarbeitung</code>, dieser Name ist willkürlich gewählt.</p>
<p>Das ist schon alles und damit kommen wir zur Definition der besagten Funktion <code>klickverarbeitung</code>:</p>
<pre>function klickverarbeitung () {
document.getElementById("interaktiv").innerHTML += " Huhu, das ist von Javascript eingefügter Text.";
}</pre>
<p>Was darin passiert, müssen Sie noch nicht bis ins Detail verstehen. Wie Sie sehen können, wird darin ebenfalls mittels <code>document.getElementById</code> das angeklickte <code>p</code>-Element angesprochen. Erneut wird eine Eigenschaft gesetzt, diesmal <code>innerHTML</code>. An den bestehenden Wert wird mit dem Operator <code>+=</code> ein String angehängt. Wenn Sie das Beispiel im Browser ausführen und auf das Element klicken, ändert sich der Text des Elements.</p>
<p>Zusammengefasst sieht das Beispiel mit eingebettetem JavaScript so aus:</p>
<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Beispiel für traditionelles Event-Handling</title>
<script type="text/javascript">
window.onload = start;
function start () {
document.getElementById("interaktiv").onclick = klickverarbeitung;
}
function klickverarbeitung () {
document.getElementById("interaktiv").innerHTML += " Huhu, das ist von Javascript eingefügter Text.";
}
</script>
</head>
<body>
<p id="interaktiv">Dies ist ein einfacher Textabsatz, aber mithilfe von JavaScript können wir ihn
interaktiv gestalten. Klicken Sie diesen Absatz doch einfach mal mit der Maus an!</p>
</body>
</html></pre>
<p>Den JavaScript-Code können wir später natürlich in eine externe Datei auslagern.</p>
<p>So einfach und nutzlos dieses kleine Beispiel aussieht: Wenn Sie das dreischrittige Schema verstanden haben, beherrschen Sie einen Großteil der JavaScript-Programmierung und wissen, wie Scripte üblicherweise strukturiert werden und schließlich ausgeführt werden.</p>
</div>
<div class="section" id="handler-loeschen">
<h2>Event-Überwachung beenden</h2>
<p>Wenn Sie einmal einen Event-Handler bei einem Element registriert haben, wird die Handler-Funktion künftig bei jedem Eintreten des Ereignisses ausgeführt – zumindest solange das Dokument im Browser dargestellt wird und es nicht neu geladen wird. Es ist möglich, die Event-Überwachung wieder mittels JavaScript zu beenden.</p>
<p>Wie beschrieben besteht das traditionelle Event-Handling schlicht darin, dass eine Objekteigenschaft (z.B. <code>onclick</code>) durch eine Wertzuweisung mit einer Funktion gefüllt wird. Um das Registrieren des Handlers rückgängig zu machen, beschreiben wir erneut diese Objekteigenschaft. Allerdings weisen wir ihr keine Funktion zu, sondern einen anderen Wert. Dazu bietet sich beispielsweise der spezielle Wert <code>null</code> an, der soviel wie »absichtlich leer« bedeutet.</p>
<p>Das Schema zum Löschen des Event-Handlers lautet demnach:</p>
<pre>element.onevent = null;</pre>
<p>Wenn wir im obigen Beispiel die Überwachung des Klick-Ereignisses beim <code>p</code>-Element wieder beenden wollen, können wir entsprechend notieren:</p>
<pre>document.getElementById("interaktiv").onclick = null;</pre>
</div>
<div class="section" id="fehler-handler-aufrufen">
<h2>Häufiger Fehler: Handler-Funktion direkt aufrufen</h2>
<p>Ein häufiger Fehler beim Registrierens eines Event-Handlers sieht folgendermaßen aus:</p>
<pre>element.onevent = handlerfunktion(); // Fehler!</pre>
<p>Oft steckt hinter dieser Schreibweise der Wunsch, der Handler-Funktion noch Parameter mitzugeben, damit darin gewissen Daten zur Verfügung stehen:</p>
<pre>element.onevent = handlerfunktion(parameter); // Fehler!</pre>
<p>Sie müssen sich die Funktionsweise des traditionellen Event-Handlings noch einmal durch den Kopf gehen lassen, um zu verstehen, warum diese Anweisungen nicht den gewünschten Zweck erfüllen. Beim korrekten Schema <code>element.onevent = handlerfunktion;</code> wird eine Funktion, genauer gesagt ein Funktionsobjekt, in einer Eigenschaft des Elementobjektes gespeichert.</p>
<p>Das ist beim obigen fehlerhaften Code nicht der Fall. Anstatt auf das Eintreten des Ereignisses zu warten, wird die Handler-Funktion <strong>sofort ausgeführt</strong>. Dafür verantwortlich sind die Klammern <code>()</code> hinter dem Funktionsnamen – diese Klammern sind nämlich der JavaScript-Operator zum Aufruf von Funktionen.</p>
<p>Das Erste, was der JavaScript-Interpreter beim Verarbeiten dieser Zeile macht, ist der Aufruf der Funktion. Deren <em>Rückgabewert</em> wird schließlich in der <code>onevent</code>-Eigenschaft gespeichert. In den meisten Fällen hat die Handler-Funktion keinen Rückgabewert, was dem Wert <code>undefined</code> entspricht, oder sie gibt <code>false</code> zurück, sodass schlicht diese Werte in die Eigenschaft geschrieben werden. Wir wollen die Funktion aber nicht direkt aufrufen, sondern bloß das Funktionsobjekt ansprechen, um es in die Eigenschaft zu kopieren. Daher dürfen an dieser Stelle keine Klammern hinter dem Namen notiert werden.</p>
<p>Der Wunsch, der Handler-Funktion gewisse Daten als Parameter zu übergeben, ist verständlich. Die obige fehlerhafte Schreibweise vermag dies aber nicht zu leisten. Leider ist diese Aufgabenstellung auch nicht so einfach lösbar: Das altbekannte Schema <code>element.onevent = handlerfunktion;</code> muss eingehalten werden. Der Funktionsaufruf, der die Parameter übergibt, wird in einer zusätzlichen Funktion untergebracht (gekapselt). Schematisch:</p>
<pre>function helferfunktion (parameter) {
/* Arbeite mit dem Parameter und verarbeite das Ereignis */
}
function handlerfunktion () {
helferfunktion("Parameter");
}
element.onevent = handlerfunktion;</pre>
<p>Das konkrete Beispiel aus dem vorigen Abschnitt können wir so anpassen, dass in der Handler-Funktion bloß eine andere Hilfsfunktion mit Parametern ausgeführt wird:</p>
<pre>window.onload = start;
function start () {
document.getElementById("interaktiv").onclick = klickverarbeitung;
}
function klickverarbeitung () {
textHinzufügen(document.getElementById("interaktiv"), "Huhu, das ist von Javascript eingefügter Text.");
}
function textHinzufügen (element, neuerText) {
element.innerHTML += neuerText;
}
</pre>
<p>In der Handler-Funktion <code>klickverarbeitung</code> wird die neue Funktion <code>textHinzufügen</code> mit Parametern aufgerufen. Diese wurde verallgemeinert und ist wiederverwendbar: Sie nimmt zwei Parameter an, einmal ein Elementobjekt und einmal einen String. Die Funktion hängt sie den angegebenen Text in das angegebene Element ein.</p>
</div>
<div class="section" id="inline-handler">
<h2>Eingebettete Event-Handler-Attribute</h2>
<p>Wir haben kennengelernt, wie wir externe JavaScripte einbinden und darin auf »traditionelle« Weise Event-Handler registrieren können. Der Vorteil davon ist, dass wir HTML- und JavaScript-Code und damit das Dokument und das JavaScript-Verhalten trennen können.</p>
<p>Wann immer es möglich ist, sollten Sie diese Vorgehensweise des »Unobtrusive JavaScript« wählen. Es soll aber nicht verschwiegen werden, dass es auch möglich ist, JavaScript direkt im HTML-Code unterzubringen und damit auf Ereignisse zu reagieren.</p>
<p>Zu diesem Zweck besitzen fast alle HTML-Elemente entsprechende Attribute, in die Sie den auszuführenden JavaScript-Code direkt hineinschreiben können. In diesem Code können Sie natürlich auch eigene Funktionen aufrufen, die sie in einem <code>script</code>-Element oder einer externen JavaScript-Datei definiert haben. Die Attribute sind genauso benannt wie die entsprechenden JavaScript-Eigenschaften: Die Vorsilbe <code>on</code> gefolgt vom Ereignistyp (z.B. <code>click</code>). Das
Schema lautet dementsprechend:</p>
<pre><element onevent="JavaScript-Anweisungen"></pre>
<p>Ein konkretes Beispiel:</p>
<pre><p onclick="window.alert('Absatz wurde geklickt!');">Klicken Sie diesen Textabsatz an!</p></pre>
<p>Hier enthält das Attribut die JavaScript-Anweisung <code>window.alert('Absatz wurde geklickt!');</code>, also einen Aufruf der Funktion <code>window.alert</code>. Sie können mehrere Anweisungen in einer Zeile notieren, indem Sie sie wie üblich mit einem Semikolon trennen. Zum Beispiel Funktionsaufrufe:</p>
<pre><p onclick="funktion1(); funktion2();">Klicken Sie diesen Textabsatz an!</p></pre>
<p>Wie sie sehen, wird es hier schon unübersichtlich. Sie müssen Ihren Code in eine Zeile quetschen, damit die Browser das Attribut korrekt verarbeiten.</p>
<p>Es gibt viele gute Gründe, HTML und JavaScript möglichst zu trennen und auf solches <em>Inline-JavaScript</em> zu verzichten. Natürlich hat diese Grundregel berechtigte Ausnahmen. Als Anfänger sollten sie sich jedoch mit der Trennung sowie dem Registrieren von Event-Handlern mittels JavaScript vertraut machen, wie es in den vorigen Abschnitten erläutert wurde. Wenn Ihre Scripte komplexer werden, werden Sie vielleicht vereinzelt auf Event-Handler-Attribute zurückgreifen, aber der Großteil sollte ohne sie funktionieren.</p>
<p>Die Verwendung von solchen Event-Handler-Attrbuten bringt viele Eigenheiten und Nachteile mit sich, auf die an dieser Stelle nicht weiter eingegangen wird.</p>
<p>(Zugriff auf this u.d. Event-Objekt, Mehrere Anweisungen und Whitespace, Stringbegrenzung/Anführungszeichen, geänderte Scope-Chain, siehe <a href="http://forum.de.selfhtml.org/archiv/2009/3/t184896/#m1226489">Forumsposting</a>)</p>
</div>
<div class="section" id="fehler-code-als-string">
<h2>Häufiger Fehler: Auszuführenden Code als String zuweisen</h2>
<p>Nachdem wir Inline-JavaScript angeschnitten haben, sei auf einen weiteren häufigen Fehler beim traditionellen Event-Handling hingewiesen. Manche übertragen ihr Wissen über Event-Handler-Attribute aus HTML auf das das Registrieren von Event-Handlern in JavaScript. Sie versuchen z.B. folgendes:</p>
<pre>element.onclick = "window.alert('Element wurde geklickt!');"</pre>
<p>Oder gleichwertig mithilfe der DOM-Methode <code>setAttribute</code>:</p>
<pre>element.setAttribute("onclick", "window.alert('Element wurde geklickt!');");</pre>
<p>Sprich, sie behandeln die Eigenschaft <code>onclick</code> und dergleichen wie Attribute unter vielen. Für die meisten anderen Attribute gilt das auch. Ein Beispiel:</p>
<pre><p><a id="link" href="http://de.selfhtml.org/"
title="Deutschsprachige Anleitung zum Erstellen von Webseiten">SELFHTML</a></p>
<script type="text/javascript">
var element = document.getElementById("link");
element.title = "Die freie Enzyklopädie";
element.href = "http://de.wikipedia.org/";
element.firstChild.nodeValue = "Wikipedia";
</script></pre>
<p>Das Script spricht ein Link-Element über seine ID an und ändert dessen Attribute <code>title</code> und <code>href</code> sowie schließlich dessen Textinhalt. Das Beispiel illustriert, dass sich die Zuweisungen der Attributwerte im HTML und im JavaScript stark ähneln. Die neuen Attributwerte werden im JavaScript einfach als Strings notiert.</p>
<p>Diese Vorgehensweise ist beim Setzen von Event-Handler-Attributen über JavaScript nicht völlig falsch. <em>Theoretisch</em> haben folgende Schreibweisen denselben Effekt:</p>
<pre>// Methode 1: Traditionelles Event-Handling
function handlerfunktion () {
window.alert("Hallo Welt!");
}
element.onevent = handlerfunktion;
// Methode 2: Auszuführenden Code als als String zuweisen
// (Achtung, nicht browserübergreifend!)
element.setAttribute("onevent", "window.alert('Hallo Welt!');");</pre>
<p>Ihnen mag die die zweite Schreibweise in vielen Fällen einfacher und kürzer erscheinen. Doch zum einen hat sie das Problem, dass sie in der Praxis längst nicht so etabliert ist wie die traditionelle: Der Internet Explorer einschließlich der neuesten Version 8 unterstützt diese Schreibweise noch nicht.</p>
<p>Davon abgesehen hat es Nachteile, JavaScript-Code nicht in Funktionen zu ordnen, sondern in Strings zu verpacken. Der Code wird unübersichtlicher und Fehler sind schwieriger zu finden. Sie sollten daher möglichst das traditionelle Schema vorziehen.</p>
</div>
<div class="sequence-navigation">
<p class="next"><a href="event-handling-objekt.html" rel="next">Arbeiten mit dem Event-Objekt</a></p>
<p class="prev"><a href="einbindung.html" rel="prev">Einbindung in HTML</a></p>
</div>
<div id="footer">
<p><strong>JavaScript-Dokumentation</strong> · <a href="./">Zum Inhaltsverzeichnis</a></p>
<p>Autor: <a href="http://molily.de/">molily</a> · Kontakt: <a href="mailto:zapperlott@gmail.com">zapperlott@gmail.com</a></p>
<p>Lizenz: <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/de/">Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen</a>.</p>
</div>
</body>
</html>