aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/api/window
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:45:38 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:45:38 +0100
commit4ab365b110f2f1f2b736326b7059244a32115089 (patch)
treec3c7c0219f728ade49a78c238c51cc0c8d06ebd6 /files/de/web/api/window
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-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.html156
-rw-r--r--files/de/web/api/window/load_event/index.html88
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">&lt;script&gt;
+ document.addEventListener("DOMContentLoaded", function(event) {
+  console.log("DOM fully loaded and parsed");
+ });
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script&gt;
+ document.addEventListener("DOMContentLoaded", function(event) {
+  console.log("DOM fully loaded and parsed");
+ });
+
+for(var i=0; i&lt;1000000000; i++)
+{} // Dieses synchrone Script wird das Parsen des DOMs verzögern. Dadurch wird das DOMContentLoaded-Event erst später ausgelöst.
+&lt;/script&gt;
+</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">&lt;script&gt;
+ window.addEventListener("load", function(event) {
+  console.log("Alle Ressourcen haben das Laden beendet!");
+ });
+&lt;/script&gt;
+</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>