-
Notifications
You must be signed in to change notification settings - Fork 17
/
event-handling-onload.html
97 lines (85 loc) · 7.4 KB
/
event-handling-onload.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
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>JavaScript: Scripte beim Laden des Dokuments ausführen</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: Scripte beim Laden des Dokuments ausführen</h1>
<div class="section" id="onload-nachteile">
<h2>Einleitung</h2>
<p>Wir haben bereits die <a href="event-handling-grundlagen.html#ereignisbasierung#ereignisbasierung">drei Phasen von ereignisbasierten Scripten</a> kennengelernt. Die zweite Phase tritt ein, wenn das Dokument fertig geladen ist und der DOM-Elementbaum des Dokuments vollständig aufgebaut ist.</p>
<p>Ein Script sollte dem Dokument so schnell wie möglich Interaktivität hinzufügen. Sobald der Zugriff auf den gesamten DOM-Baum möglich ist, sollte ein Script die Ereignis-Überwachung starten und notwendige Änderungen vornehmen. Dies ist gewährleistet, wenn wir das Script ans Dokumentende stellen. Ein solches Script hat automatisch Zugriff auf alle Elemente, die vor ihm notiert sind.</p>
<p>Falls das Script an einer anderen Stelle eingebunden wird, beispielsweise im Dokumentkopf, so hat es nicht direkt Zugriff auf alle gewünschten Elemente. Es muss stattdessen warten, bis das Dokument fertig geladen ist und der DOM-Baum aufgebaut ist.</p>
</div>
<div class="section" id="domcontentloaded">
<h2>Das DOMContentLoaded-Ereignis</h2>
<p>Es gibt ein Ereignis, das eintritt, sobald der Parser den gesamten HTML-Code eingelesen hat und der komplette DOM-Baum für JavaScripte zugänglich ist: <code>DOMContentLoaded</code>.</p>
<p>Das folgende Beispiel demonstriert das <code>DOMContentLoaded</code>-Ereignis:</p>
<pre>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Dokument mit Script im Kopf</title>
<script>
function clickHandler() {
window.alert('Button wurde geklickt!');
}
function dokumentGeladen(event) {
window.alert('Dokument wurde geladen! Zugriff auf das komplette DOM möglich.')
document.getElementById('interaktiv').addEventListener('click', clickHandler, false);
}
document.addEventListener('DOMContentLoaded', dokumentGeladen, false);
</script>
</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>Wir kennen den Grundaufbau des Beispiels bereits. Das Dokument enthält einen Button, der JavaScript-Interaktivität erhalten soll.</p>
<p>Da sich das Script im Dokumentkopf und nicht am Dokumentende befindet, können wir jedoch nicht sofort mit <code>document.getElementById('interaktiv')</code> auf den Button zugreifen. Wir müssen erst warten, bis der DOM-Baum zur Verfügung steht.</p>
<p>Daher registrieren wir zunächst einen Event-Handler für das <code>DOMContentLoaded</code>-Ereignis. Der DOM-Knoten, bei dem das Ereignis passiert, ist <code>document</code>. Daher rufen wir <code>document.addEventListener(…)</code> auf und übergeben die für <code>addEventListener</code> üblichen Parameter. Als Handler-Funktion wird <code>dokumentGeladen</code> angegeben.</p>
<p>Die Funktion <code>dokumentGeladen</code> wird ausgeführt, sobald der DOM-Baum verfügbar ist. Darin können wir nun den Button ansprechen und einen <code>click</code>-Handler registrieren. Der Rest des Beispiels ist wie gehabt.</p>
<p>Beachten Sie, dass die Groß- und Kleinschreibung beim Ereignisnamen von Bedeutung ist. Sie müssen exakt <code>'DOMContentLoaded'</code> notieren. Eine andere Schreibung führt nicht zum Erfolg.</p>
<p>Alle Browser, die den <a href="event-handling-fortgeschritten.html#dom-events">DOM-Events-Standard umsetzen</a>, kennen auch <code>DOMContentLoaded</code>. Für den Internet Explorer vor Version 9 können Sie stattdessen ein Helferscript verwenden: <a href="http://javascript.nwbox.com/ContentLoaded/contentloaded.js">ContentLoaded.js von Diego Perini</a>.</p>
</div>
<div class="section" id="load">
<h2>Das load-Ereignis</h2>
<p>Das besprochene <code>DOMcontentLoaded</code>-Ereignis tritt ein, sobald der HTML-Parser seine Arbeit verrichtet hat und der JavaScript-Zugriff auf alle Elemente im Dokument möglich ist. Dies ist entkoppelt vom Laden des Dokuments, wie es der Benutzer wahrnimmt.</p>
<p>Um das Dokument erstmalig zu <dfn>rendern</dfn> (anzuzeigen), muss der Browser nämlich das Stylesheet heruntergeladen haben, das im Dokumentkopf verlinkt ist. Manchmal wartet er auch noch auf das Laden spezieller Schriften (Webfonts), die eingebunden sind. Dann kann der Anwender das Dokument schon größtenteils lesen und bedienen.</p>
<p>Es fehlen aber noch Inhalte. Nach dem ersten Rendern werden üblicherweise weitere Ressourcen vom Webserver heruntergeladen. Dazu gehören eingebettete Grafiken, Audio- und Video-Inhalte, Plugins sowie Iframes. Sobald diese Ressourcen teilweise geladen sind, rendert der Browser erneut und aktualisiert die Darstellung.</p>
<p>Es gibt ein JavaScript-Ereignis, das eintritt, wenn all diese Ressourcen vollständig heruntergeladen sind. Es lautet schlicht <code>load</code> und passiert beim globalen <code>window</code>-Objekt. Das folgende Beispiel überwacht das <code>load</code>-Ereignis:</p>
<pre>
function dokumentVollständigGeladen() {
window.alert('Dokument wurde vollständig geladen!')
}
window.addEventListener('load', dokumentVollständigGeladen, false);
</pre>
<p>Zwischen dem <code>DOMContentLoaded</code>- und dem <code>load</code>-Ereignis können viele Sekunden liegen. <code>DOMContentLoaded</code> passiert immer zuerst, dann <code>load</code> einige Zeit später.</p>
<p>Seitdem es <code>DOMContentLoaded</code> gibt, ist das <code>load</code>-Ereignis nicht mehr wichtig. In den meisten Fällen sollten Sie Ihre Script beim Eintreten des <code>DOMContentLoaded</code>-Ereignisses starten. Das <code>load</code>-Ereignis können Sie verwenden, um die Geschwindigkeit (Performance) ihrer Seite zu messen oder auf die Größen und die Pixeldaten von Grafiken zuzugreifen.</p>
</div>
<div class="sequence-navigation">
<p class="next"><a href="event-handling-effizient.html" rel="next">Effiziente Ereignis-Verarbeitung</a></p>
<p class="prev"><a href="event-handling-fortgeschritten.html" rel="prev">Fortgeschrittene Ereignis-Verarbeitung</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>