diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:45:38 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:45:38 +0100 |
commit | 4ab365b110f2f1f2b736326b7059244a32115089 (patch) | |
tree | c3c7c0219f728ade49a78c238c51cc0c8d06ebd6 /files/de/web/api/window | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-4ab365b110f2f1f2b736326b7059244a32115089.tar.gz translated-content-4ab365b110f2f1f2b736326b7059244a32115089.tar.bz2 translated-content-4ab365b110f2f1f2b736326b7059244a32115089.zip |
unslug de: move
Diffstat (limited to 'files/de/web/api/window')
-rw-r--r-- | files/de/web/api/window/domcontentloaded_event/index.html | 156 | ||||
-rw-r--r-- | files/de/web/api/window/load_event/index.html | 88 |
2 files changed, 244 insertions, 0 deletions
diff --git a/files/de/web/api/window/domcontentloaded_event/index.html b/files/de/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..d6841f774a --- /dev/null +++ b/files/de/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,156 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +tags: + - Referenz + - Web + - events +translation_of: Web/API/Window/DOMContentLoaded_event +--- +<p>Das <code>DOMContentLoaded</code>-Event wird ausgelöst, wenn das initiale HTML-Dokument vollständig geladen und geparst ist. Es wird dabei nicht auf Stylesheets, Bilder und Frames gewartet. Das <a href="/en-US/docs/Mozilla_event_reference/load"><code>load-Event</code></a> sollte im Gegensatz dazu nur benutzt werden um eine komplett geladene Seite zu erkennen. Es ist ein weit verbreiteter Fehler das <a href="/en-US/docs/Mozilla_event_reference/load"><code>load-Event</code></a> zu benutzen, obwohl <code>DOMContentLoaded</code> wesentlich besser geeignet wäre.</p> + +<p>{{Note("Synchrones JavaScript pausiert das Parsen des DOM.")}}</p> + +<p>{{Note("Es gibt viele Bibliotheken, die Methoden bereitstellen, um bei verschiedenen Browsern zu erkennen, ob das DOM bereit ist.")}}</p> + +<h2 id="Performanz">Performanz</h2> + +<p>Wenn DOM so schnell wie möglich geladen werden soll, nachdem der Benutzer die Seite angefragt hat, sollte zum einen das <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript asynchron</a> ausgeführt und <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">das Laden der Stylesheets optimiert</a> werden, was bei zu häufigem Einsatz den Aufbau der Seite durch das parallele Laden verlangsamen kann.</p> + +<h2 id="Allgemeine_Informationen">Allgemeine Informationen</h2> + +<dl> + <dt style="width: 120px; text-align: right; float: left;">Specification</dt> + <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd> + <dt style="width: 120px; text-align: right; float: left;">Interface</dt> + <dd style="margin: 0px 0px 0px 120px;">Event</dd> + <dt style="width: 120px; text-align: right; float: left;">Bubbles</dt> + <dd style="margin: 0px 0px 0px 120px;">Ja</dd> + <dt style="width: 120px; text-align: right; float: left;">Abbrechbar</dt> + <dd style="margin: 0px 0px 0px 120px;">Ja (Auch wenn es als ein einfaches Event spezifiziert ist, das nicht abgebrochen werden kann)</dd> + <dt style="width: 120px; text-align: right; float: left;">Ziel</dt> + <dd style="margin: 0px 0px 0px 120px;">Dokument</dd> + <dt style="width: 120px; text-align: right; float: left;">Standardaktion</dt> + <dd style="margin: 0px 0px 0px 120px;">Keine</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Das Zielelement des Events (das oberste Ziel im DOM Baum).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Der Typ des Events.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Gibt an, ob das Event weiter nach oben wandert (bubble).</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Gibt and, ob das Event abbrechbar ist.</td> + </tr> + </tbody> +</table> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM fully loaded and parsed"); + }); +</script> +</pre> + +<pre class="brush: html"><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM fully loaded and parsed"); + }); + +for(var i=0; i<1000000000; i++) +{} // Dieses synchrone Script wird das Parsen des DOMs verzögern. Dadurch wird das DOMContentLoaded-Event erst später ausgelöst. +</script> +</pre> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td> + <td>9.0<sup>[2]</sup></td> + <td>9.0</td> + <td>3.1<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Bubbling für dieses Event benötigt mindestens Gecko 1.9.2, Chrome 6, and Safari 4.</p> + +<p>[2] Internet Explorer 8 unterstützt das <code>readystatechange</code>-Event, welches genutzt werden kann um festzustellen, wenn das DOM fertig ist. In früheren Versionen des Internet Explorers kann dieser Status festgestellt werden, indem wiederholt versucht wird, <code>document.documentElement.doScroll("left");</code> auszuführen. Dieser Befehl gibt einen Error zurück, bis das DOM bereit ist.</p> + +<h2 id="Verwandte_Events">Verwandte Events</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/de/web/api/window/load_event/index.html b/files/de/web/api/window/load_event/index.html new file mode 100644 index 0000000000..066a2bea25 --- /dev/null +++ b/files/de/web/api/window/load_event/index.html @@ -0,0 +1,88 @@ +--- +title: load +slug: Web/Events/load +translation_of: Web/API/Window/load_event +--- +<p>Das <code>load</code> Ereignis wird ausgelöst, sobald eine Ressource und die von ihr abhängigen Ressourcen das Laden beendet haben.</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spezifikation</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Schnittstelle</dt> + <dd style="margin: 0 0 0 120px;">UIEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">bubbles</dt> + <dd style="margin: 0 0 0 120px;">Nein</dd> + <dt style="float: left; text-align: right; width: 120px;">cancelable</dt> + <dd style="margin: 0 0 0 120px;">Nein</dd> + <dt style="float: left; text-align: right; width: 120px;">Ziel</dt> + <dd style="margin: 0 0 0 120px;">Window,Document,Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><script> + window.addEventListener("load", function(event) { + console.log("Alle Ressourcen haben das Laden beendet!"); + }); +</script> +</pre> + +<p> </p> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> |