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/events | |
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/events')
-rw-r--r-- | files/de/web/events/change/index.html | 109 | ||||
-rw-r--r-- | files/de/web/events/domcontentloaded/index.html | 156 | ||||
-rw-r--r-- | files/de/web/events/load/index.html | 88 | ||||
-rw-r--r-- | files/de/web/events/readystatechange/index.html | 86 |
4 files changed, 0 insertions, 439 deletions
diff --git a/files/de/web/events/change/index.html b/files/de/web/events/change/index.html deleted file mode 100644 index 8836b6bc67..0000000000 --- a/files/de/web/events/change/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: change -slug: Web/Events/change -translation_of: Web/API/HTMLElement/change_event ---- -<p>Das <code>change</code> Event wird von {{HTMLElement("input")}}, {{HTMLElement("select")}}, und {{HTMLElement("textarea")}} Elementen ausgelöst, wenn der Benutzer den Wert des Elements verändert. Im Gegensatz zum {{event("input")}} Event wird das <code>change</code> Event nicht bei jeder Änderung der <code>value</code> Eigenschaft ausgelöst.</p> - -<h2 id="General_info">General info</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Specification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">Yes</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">Element</dd> - <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> - <dd style="margin: 0 0 0 120px;">undefined</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>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> - -<h2 id="Beschreibung">Beschreibung</h2> - -<p>Das <code>change</code> Event wird abhängig vom Form-Element, welches verändert wird, und der Art der Benutzerinteraktion mit dem Element in verschiedenen Situationen ausgelöst:</p> - -<ul> - <li>Wenn das Element aktiviert ist (durch einen KIlick oder Verwendung der Tastatur) bei <code><input type="radio"></code> und <code><input type="checkbox"></code>;</li> - <li>Wenn der Benutzer den Veränderung explizit bestätigt (z.B.: beim Auswählen eines Wertes eines {{HTMLElement("select")}}'s Dropdown mit einem Mausklick, beim Auswählen eine Datums bei einem Date Picker für <code><input type="date"></code>, beim Auswählen einer Datei im File Picker für <code><input type="file"></code>, etc.);</li> - <li>Wenn das Element den Fokus verliert, nachdem sein Wert verändert aber noch nicht bestätigt wurde (z.B.: nach dem Editieren des Wert eines {{HTMLElement("textarea")}} oder <code><input type="text"></code>).</li> -</ul> - -<p>Verschiedene Webbbrowser unterscheiden sich darin, ob das <code>change</code> Event bei bestimmten Interaktionen ausgelöst werden soll oder nicht. Tastaturnavigation in {{HTMLElement("select")}} Elementen zum Beispiel lösen das <code>change</code> event in Gecko nie aus bis der Benutzer die Enter-Taste drückt oder den Fokus vom <code><select></code> (see {{bug("126379")}}) Element nimmt.</p> - -<p>Die HTML Spezifikation listet<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply"> die <code><input></code> Typen, welche das <code>change</code> Event auslösen können</a>.</p> - -<h2 id="Beispiele">Beispiele</h2> - -<p>Ein unvollständiges Beispiel auf jsfiddle: <a href="http://jsfiddle.net/nfakc/5/" title="http://jsfiddle.net/nfakc/5/">http://jsfiddle.net/nfakc/5/</a>, welches möglicherweise nich in allen Webbrowsern funktioniert.</p> - -<h3 id="Beispiel_Change_Event_auf_einem_select">Beispiel: Change Event auf einem <code>select</code></h3> - -<p>Der folgende Code behandelt das <code>change</code> Event eines <code>select</code> durch den Aufruf der <code>changeEventHandler</code> Funktion im <code>onchange</code> Attribut. Die Funktion liest den Wert des Elements, das das Event auslöste, und gibt ihn in einem Alert aus.</p> - -<pre class="brush: html"><html> - <head> - <title>Example: Change event on a select</title> - <script type="text/javascript"> - function changeEventHandler(event) { - alert('You like ' + event.target.value + ' ice cream.'); - } - </script> - </head> - <body> - <label>Choose an ice cream flavor: </label> - <select size="1" onchange="changeEventHandler(event);"> - <option>chocolate</option> - <option>strawberry</option> - <option>vanilla</option> - </select> - </body> -</html> -</pre> - -<h2 id="Siehe_auch">Siehe auch</h2> - -<p>{{domxref("NetworkInformation.connection")}} löst das <code>change</code> Event aus, wenn sich die Informationen zur Verbindung verändern.</p> - -<h2 id="Webbrowserkompatibilität">Webbrowserkompatibilität</h2> - -<p>{{ CompatibilityTable() }}</p> - -<p>Laut <a href="http://www.quirksmode.org/dom/events/">QuirksMode</a> sind Chrome und Firefox manchmal kompatibel. Aber IE9 und frühere Versionen von IE10 haben nur eine unvollständige Unterstützung.</p> diff --git a/files/de/web/events/domcontentloaded/index.html b/files/de/web/events/domcontentloaded/index.html deleted file mode 100644 index d6841f774a..0000000000 --- a/files/de/web/events/domcontentloaded/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -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/events/load/index.html b/files/de/web/events/load/index.html deleted file mode 100644 index 066a2bea25..0000000000 --- a/files/de/web/events/load/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -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> diff --git a/files/de/web/events/readystatechange/index.html b/files/de/web/events/readystatechange/index.html deleted file mode 100644 index 9fba4b5dee..0000000000 --- a/files/de/web/events/readystatechange/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: readystatechange -slug: Web/Events/readystatechange -tags: - - Referenz - - XMLHttpRequest -translation_of: Web/API/Document/readystatechange_event ---- -<p>{{ApiRef}}</p> - -<p>Das Ereignis <code>readystatechange</code> wird ausgelöst, wenn sich die Eigenschaft <a href="/en-US/docs/DOM/document.readyState"><code>readyState</code></a> eines Dokumentes verändert hat.</p> - -<h2 id="Allgemeine_Information">Allgemeine Information</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.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness">HTML5</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Schnittstelle</dt> - <dd style="margin: 0 0 0 120px;">Event</dd> - <dt style="float: left; text-align: right; width: 120px;">Aufsteigend</dt> - <dd style="margin: 0 0 0 120px;">Nein</dd> - <dt style="float: left; text-align: right; width: 120px;">Abbrechbar</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;">Dokument</dd> - <dt style="float: left; text-align: right; width: 120px;">Standardaktion</dt> - <dd style="margin: 0 0 0 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>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> - -<h2 id="Beispiel">Beispiel</h2> - -<pre class="brush: js">// als Alternative zu DOMContentLoaded -document.onreadystatechange = function () { - if (document.readyState == "interactive") { - initApplication(); - } -} -</pre> - -<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> - -<p>Dieses Ereignis wird vom Internet Explorer schon sehr lange unterstützt und kann daher als Alternative zum <a href="/en-US/docs/Mozilla_event_reference/DOMContentLoaded_(event)"><code>DOMContentLoaded</code></a>-Ereignis genutzt werden (vgl. Anmerkung [2] im Abschnitt <a href="/de/docs/Web/Events/DOMContentLoaded#Browserkompatibilität">Browserkompatibilität</a>).</p> - -<h2 id="Verwandte_Ereignisse">Verwandte Ereignisse</h2> - -<ul> - <li>{{event("DOMContentLoaded")}}</li> - <li>{{event("readystatechange")}}</li> - <li>{{event("load")}}</li> - <li>{{event("beforeunload")}}</li> - <li>{{event("unload")}}</li> -</ul> |