-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathevent-handling-grundlagen.html
290 lines (263 loc) · 21.5 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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>JavaScript: Grundlagen der Ereignis-Verarbeitung</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
</head>
<body>
<div id="nav">
<p>Hier entsteht eine <strong>JavaScript-Dokumentation</strong> von <a href="https://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:[email protected]">E-Mail</a> entgegen genommen.</p>
<p class="contents-link"><a href="./">Zum Inhaltsverzeichnis</a></p>
</div>
<h1>JavaScript: Grundlagen der Ereignis-Verarbeitung</h1>
<div class="section" id="ereignisbasierung">
<h2>Ereignisbasierte Scripte</h2>
<p>Das Kapitel <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, einliest 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> (englisch <strong>Event-Handling</strong>).</p>
<p>Moderne Scripte durchlaufen deshalb verschiedene <strong>Phasen</strong>:</p>
<div class="section" id="phase-laden">
<h3>Phase 1: Das Dokument wird empfangen und eingelesen</h3>
<p>Dabei wird das JavaScript erstmals ausgeführt. Je nach Position des Scripts im Dokument hat das Script noch keinen vollständigen Zugriff auf das Dokument.</p>
<p>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.</p>
</div>
<div class="section" id="phase-onload">
<h3>Phase 2: Das Dokument ist fertig geladen</h3>
<p>Der vollständige Zugriff auf das Dokument über das DOM ist jetzt möglich. Nun wird der Teil des Scripts aktiv, der dem Dokument JavaScript-Interaktivität hinzufügt. Das Script spricht vorhandene Elemente an und fügt ihnen <dfn>Event-Handler</dfn> hinzu (englisch <em>handle</em> = verarbeiten, <em>handler</em> = Verarbeiter). Das Script kann auch den Inhalt oder die Darstellung bestehender Elemente verändern und dem Dokument neue Elemente hinzufügen – auch <dfn>DOM-Manipulation</dfn> genannt.</p>
</div>
<div class="section" id="phase-event-handling">
<h3>Phase 3: Der Anwender bedient das Dokument und das Script reagiert darauf</h3>
<p>Wenn die überwachten Ereignisse an den entsprechenden Elementen im Dokument eintreten, so werden Teile des Scripts aktiv. Die entsprechenden Event-Handler werden ausgeführt.</p>
</div>
<div class="section" id="script-struktur">
<h3>Resultierende Script-Struktur</h3>
<p>Dieser Ablauf gibt die Struktur der meisten Scripte vor:</p>
<ul>
<li>Im Code werden Funktionen definiert, die später als Handler Ereignisse verarbeiten.</li>
<li>Es gibt Initialisierungs-Code, der ausgeführt wird, wenn das Dokument fertig geladen ist.</li>
</ul>
<p>Wenn ein Script im Dokumentkopf eingebunden wird, so liegt zwischen Phase 1 und 2 eine große Zeitspanne. Dem Script ist der vollständige Zugriff auf das DOM noch nicht möglich. Es muss vielmehr warten, bevor es die Initialisierung ausführt.</p>
<p>Wenn ein Script am Ende des Dokuments eingebunden wird anstatt im Dokumentkopf, fallen Phase 1 und 2 ineinander. Denn es hat automatisch Zugriff auf alle HTML-Elemente, die davor im Dokument notiert sind. Die Initialisierung kann sofort gestartet werden. Es ist aus diesem und anderen Gründen ratsam, ein Script am Ende des Dokuments einzubinden.</p>
</div>
</div>
<!-- ************************************************************************ -->
<div class="section" id="traditionelles-event-handling">
<h2>Traditionelles Event-Handling</h2>
<p>Um die Überwachung eines Ereignisses an einem Element zu starten, wird ein Event-Handler registriert. Im Folgenden wird die einfachste und älteste Methode vorgestellt, 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:</p>
<ul>
<li>Einen Elementobjekt,</li>
<li>einen Ereignistyp (z.B. <code>click</code>) und</li>
<li>eine Handler-Funktion.</li>
</ul>
<p>Diese drei Bestandteile finden wir im Aufbau der JavaScript-Anweisung wieder. Das allgemeine Schema für das traditionelle Event-Handling lautet:</p>
<pre>element.onevent = handlerfunktion;</pre>
<ul>
<li><code>element</code> steht für ein DOM-Objekt, üblicherweise ein Elementobjekt. 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 bedeutet <em>onclick</em> soviel wie <em>beim Klicken</em>.</li>
<li><code>handlerfunktion</code> ist der Name einer Funktion. Genauer gesagt steht an dieser Stelle ein <a href="syntax.html#ausdruecke">Ausdruck</a>, der eine Funktion 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 illustriert nur das allgemeine Schema. <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>
</div>
<div class="section" id="traditionelles-event-handling-beispiel">
<h2>Beispiel für traditionelles Event-Handling</h2>
<p>Betrachten wir ein konkretes Beispiel. Dazu starten wir mit folgendem einfachen Dokument:</p>
<pre>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Dokument mit JavaScript</title>
</head>
<body>
<button id="interaktiv">
Dies ist ein Button ohne Bedeutung, aber mithilfe von JavaScript können wir ihn
interaktiv gestalten. Klicken Sie diesen Button einfach mal mit der Maus an!
</button>
</body>
</html>
</pre>
<p>Dem <code>button</code>-Element mit der ID <code>interaktiv</code> soll nun ein Event-Handler zugewiesen werden. Ziel ist es, dass eine bestimmte Funktion aufgerufen wird, immer wenn der Anwender auf den Button klickt. Das Ereignis, das bei einem Mausklick ausgelöst wird, heißt <code>click</code>.</p>
<p>Wir werden nun in drei Schritte vorgehen:</p>
<ol>
<li>Ein Script am Ende des Dokuments hinzufügen</li>
<li>Darin eine Funktion definieren</li>
<li>Den Event-Handler registrieren um die Ereignis-Überwachung starten</li>
</ol>
<p>Zunächst einmal platzieren wir ein Script am Ende des Dokuments. Dies ist die einfachste Weise um sicherzustellen, dass das Script Zugriff auf das gesamte Dokument hat. Vor <code></body></code> fügen wir also ein <code>script</code>-Element ein:</p>
<pre>
<script>
// …
</script>
</pre>
<p>Darin definieren wir die Funktion, die als Event-Handler dienen wird. Nennen wir sie <code>clickHandler</code>:</p>
<pre>
function clickHandler() {
window.alert('Button wurde geklickt!');
}
</pre>
<p>Die einfache Beispiel-Funktion macht nichts anderes als ein Meldungsfenster auszugeben. </p>
<p>Schließlich starten wir die Ereignis-Überwachung. Der Code dazu lautet:</p>
<pre>
document.getElementById('interaktiv').onclick = clickHandler;
</pre>
<p>Was zunächst kompliziert aussieht, ist die Anwendung des bekannten Schemas <code>element.onevent = handlerfunktion;</code>.</p>
<p>Zum Registrieren des Event-Handler greifen wir über das DOM auf das Dokument zu. Dies ist direkt möglich, weil sich das Script am Ende des Dokuments befindet.</p>
<p>Der Code nutzt die DOM-Methode <code>document.getElementById</code> auf (zu deutsch: <em>hole ein Element anhand der ID</em>). Der Aufruf <code>document.getElementById('interaktiv')</code> gibt das Elementobjekt zurück, der den Button repräsentiert.</p>
<p>Damit der Zugriff auf das gewünschte Element einfach möglich ist, haben wir einen Angriffspunkt für das Script geschaffen: Das <code>button</code>-Element besitzt eine dokumentweit eindeutige ID namens <code>interaktiv</code>. Solche IDs werden neben Klassen (<code>class</code>-Attributen) benutzt, um Angriffspunkte für Stylesheets und Scripte zu bieten.</p>
<p>Nachdem wir das Element herausgesucht haben, registrieren wir den Event-Handler. Die Objekteigenschaft lautet <code>onclick</code>, denn es geht um das <code>click</code>-Ereignis. Dieser Name ist feststehend. Die Handler-Funktion lautet <code>clickHandler</code>. Dieser Name ist willkürlich gewählt, wir haben sie definiert.</p>
<p>Zusammengefasst sieht das Beispiel so aus:</p>
<pre>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Beispiel für traditionelles Event-Handling</title>
</head>
<body>
<button id="interaktiv">
Dies ist ein Button ohne Bedeutung, aber mithilfe von JavaScript können wir ihn
interaktiv gestalten. Klicken Sie diesen Button einfach mal mit der Maus an!
</button>
<script>
function clickHandler() {
window.alert('Button wurde geklickt!');
}
document.getElementById('interaktiv').onclick = clickHandler;
</script>
</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 Beispiel aussieht: Wenn Sie das 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="traditionelles-event-handling-funktionsweise">
<h2>Funktionsweise des traditionellen Event-Handlings</h2>
<p>Sie werden sich sicher fragen, wie Ereignis-Verarbeitung auf JavaScript-Ebene funktioniert. Dazu schauen wir uns den Aufbau der obigen Anweisung an:</p>
<pre>
document.getElementById('interaktiv').onclick = clickHandler;
</pre>
<p>Wir haben dort eine einfache Wertzuweisung (erkennbar durch das <code>=</code>). Auf der linken Seite steht eine Objekteigenschaft. Das Objekt ist der Elementknoten und die Eigenschaft heißt <code>onclick</code>. Auf der rechten Seite steht der zugewiesene Wert, <code>clickHandler</code>..</p>
<p>Nach dieser Zuweisung ist die Funktion <code>clickHandler</code> 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 Button-Element, so sucht der JavaScript-Interpreter nach einer Objekteigenschaft, die den Namen <code>on</code> gefolgt vom Ereignistyp trägt (im Beispiel <code>onclick</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>Diese Methode hat verschiedene Nachteile und ist 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 verbreitet.</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 einer Objekteigenschaft (z.B. <code>onclick</code>) einen Wert zugewiesen wird. Um das Registrieren des Handlers rückgängig zu machen, schreiben wir erneut auf diese Objekteigenschaft. Allerdings weisen wir ihr keine Funktion zu, sondern einen anderen Wert. Dazu bietet sich beispielsweise der <a href="kernobjekte.html#null">spezielle Wert <code>null</code></a> 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>button</code>-Element wieder beenden wollen, können wir 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 class="erroneous">
element.onevent = handlerfunktion(); // Fehler!
</pre>
<p>Oft steckt hinter dieser Schreibweise der Wunsch, der Handler-Funktion noch Parameter mitzugeben, damit diese darin verfügbar sind:</p>
<pre class="erroneous">
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 Anweisung nicht den gewünschten Zweck erfüllt. Beim korrekten Schema <code>element.onevent = handlerfunktion;</code> wird ein Funktionsobjekt in einer Eigenschaft des Elementobjekts 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 der JavaScript-Operator zum Aufruf von Funktionen.</p>
<p>Das Erste, was der JavaScript-Interpreter beim Verarbeiten dieser Zeile macht, ist die Funktion aufzurufen. 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.</p>
<p>Wir wollen die Funktion aber nicht direkt aufrufen, sondern bloß das Funktionsobjekt ansprechen, um es in der Eigenschaft zu speichern. 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. Das bekannte Schema <code>element.onevent = handlerfunktion;</code> muss eingehalten werden.</p>
<p>Eine Lösungsmöglichkeit ist, den Funktionsaufruf, der die Parameter übergibt, in einer zusätzlichen Funktion unterzubringen. Schematisch:</p>
<pre>
function helferfunktion(parameter) {
// Arbeite mit dem Parameter und verarbeite das Ereignis
}
function handlerfunktion() {
helferfunktion('Parameter');
}
element.onevent = handlerfunktion;
</pre>
<p>Das Beispiel mit dem Button können wir so anpassen, dass in der Handler-Funktion bloß eine andere Hilfsfunktion mit Parametern ausgeführt wird:</p>
<pre>
function ausgabe(text) {
window.alert(text);
}
function clickHandler() {
ausgabe('Huhu!');
}
document.getElementById('interaktiv').onclick = clickHandler;
</pre>
<p>In der Handler-Funktion <code>clickHandler</code> wird die neue Funktion <code>ausgabe</code> mit Parametern aufgerufen. Diese wurde verallgemeinert und ist wiederverwendbar: Sie nimmt einen Parameter an, einen String, und gibt diesen in einem Meldungsfenster aus.</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 <a href="einsatz.html#unobtrusive-javascript">Unobtrusive JavaScript</a> 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 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>
<button onclick="window.alert('Button wurde geklickt!');">
Klicken Sie diesen Button an!
</button>
</pre>
<p>Hier enthält das Attribut die JavaScript-Anweisung <code>window.alert('Button 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>
<button onclick="funktion1(); funktion2();">
Klicken Sie diesen Button an!
</button>
</pre>
<p>Diese Attribute, die JavaScript enthalten, werden auch <em>Inline-Event-Handler</em> genannt.</p>
<p>Die Verwendung solcher Attribute bringt viele Eigenheiten und Nachteile mit sich, auf die an dieser Stelle nicht weiter eingegangen wird. Es gibt viele gute Gründe, HTML und JavaScript möglichst zu trennen und auf solches <em>Inline-JavaScript</em> zu verzichten. Zum Einstieg sollten sie sich mit dem Registrieren von Event-Handlern mittels JavaScript vertraut machen, wie es in den vorigen Abschnitten erläutert wurde.</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 Inline-Event-Handler 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>
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 ganz 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 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. Ältere Browser unterstützen diese Schreibweise 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 das traditionelle Schema bevorzugen.</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="https://molily.de/">molily</a> · Kontakt: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Lizenz: <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/de/">Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0</a></p>
<p><a href="https://github.com/molily/javascript-einfuehrung">JavaScript-Einführung auf Github</a></p>
<p>Kostenloses Online-Buch und E-Book:<br><a href="https://testing-angular.com" lang="en" hreflang="en">Testing Angular – A Guide to Robust Angular Applications</a> (englisch)</p>
</div>
<script src="js-doku.js"></script>
</body>
</html>