diff options
Diffstat (limited to 'files/de/web/guide/events')
| -rw-r--r-- | files/de/web/guide/events/creating_and_triggering_events/index.html | 135 | ||||
| -rw-r--r-- | files/de/web/guide/events/index.html | 53 |
2 files changed, 188 insertions, 0 deletions
diff --git a/files/de/web/guide/events/creating_and_triggering_events/index.html b/files/de/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..06a765d3c0 --- /dev/null +++ b/files/de/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,135 @@ +--- +title: Erstellen und Auslösen von Ereignissen +slug: Web/Guide/Events/Creating_and_triggering_events +translation_of: Web/Guide/Events/Creating_and_triggering_events +--- +<p>Dieser Artikel zeigt, wie man DOM-Ereignisse erstellt und versendet. Solche Ereignisse werden allgemein als <strong>synthetische Ereignisse</strong> bezeichnet, im Gegensatz zu den Ereignissen, die vom Browser selbst ausgelöst werden.</p> + +<h2 id="Erstellen_von_benutzerdefinierten_Ereignissen">Erstellen von benutzerdefinierten Ereignissen</h2> + +<p>Ereignisse können mit dem <code>Event</code>-Konstruktor wie folgt erstellt werden:</p> + +<pre class="brush: js">var event = new Event('build'); + +// Listen for the event. +elem.addEventListener('build', function (e) { /* ... */ }, false); + +// Dispatch the event. +elem.dispatchEvent(event);</pre> + +<p>Das obige Codebeispiel verwendet die Methode EventTarget.dispatchEvent().</p> + +<p>Dieser Konstruktor wird in den meisten modernen Browsern unterstützt (mit Ausnahme des Internet Explorers). Für einen ausführlicheren Ansatz (der mit dem Internet Explorer funktioniert) siehe den altmodischen Weg unten.</p> + +<h3 id="Hinzufügen_von_benutzerdefinierten_Daten_-_CustomEvent()">Hinzufügen von benutzerdefinierten Daten - CustomEvent()</h3> + +<p>Um weitere Daten zum Ereignisobjekt hinzuzufügen, existiert die CustomEvent-Schnittstelle und die <strong>Detail</strong>eigenschaft kann zur Übergabe von benutzerdefinierten Daten verwendet werden.<br> + Beispielsweise könnte das Ereignis wie folgt angelegt werden:</p> + +<pre class="brush: js">var event = new CustomEvent('build', { detail: elem.dataset.time });</pre> + +<p>Auf diese Weise können Sie dann auf die zusätzlichen Daten im Event-Listener zugreifen:</p> + +<pre class="brush: js">function eventHandler(e) { + console.log('The time is: ' + e.detail); +} +</pre> + +<h3 id="Auf_die_altmodische_Art_und_Weise">Auf die altmodische Art und Weise</h3> + +<p>Der ältere Ansatz zur Erstellung von Ereignissen verwendet APIs, die von Java inspiriert sind. Im Folgenden ist ein Beispiel dargestellt:</p> + +<pre class="brush: js">// Create the event. +var event = <a href="/en-US/docs/Web/API/Document/createEvent">document.createEvent</a>('Event'); + +// Define that the event name is 'build'. +event.initEvent('build', true, true); + +// Listen for the event. +elem.addEventListener('build', function (e) { + // e.target matches elem +}, false); + +// target can be any Element or other EventTarget. +elem.dispatchEvent(event); + +</pre> + +<h3 id="Ereignisbubbling">Ereignisbubbling</h3> + +<p>Es ist oft wünschenswert, ein Ereignis aus einem untergeordneten Element auszulösen und von einem Vorfahren abfangen zu lassen; optional mit Daten:</p> + +<pre class="brush: html"><form> + <textarea></textarea> +</form> +</pre> + +<pre class="brush: js">const form = document.querySelector('form'); +const textarea = document.querySelector('textarea'); + +// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property +const eventAwesome = new CustomEvent('awesome', { + bubbles: true, + detail: { text: () => textarea.value } +}); + +// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method +form.addEventListener('awesome', e => console.log(e.detail.text())); + +// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point +textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome)); +</pre> + +<h3 id="Dynamisches_Erstellen_und_Versenden_von_Ereignissen">Dynamisches Erstellen und Versenden von Ereignissen</h3> + +<p>Elemente können auf Ereignisse warten, die noch nicht erstellt wurden:</p> + +<pre class="brush: html"><form> + <textarea></textarea> +</form> +</pre> + +<pre class="brush: js">const form = document.querySelector('form'); +const textarea = document.querySelector('textarea'); + +form.addEventListener('awesome', e => console.log(e.detail.text())); + +textarea.addEventListener('input', function() { + // Create and dispatch/trigger an event on the fly + // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element + this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) +}); +</pre> + +<h2 id="Auslösen_von_eingebauten_Ereignissen">Auslösen von eingebauten Ereignissen</h2> + +<p>Dieses Beispiel demonstriert die Simulation eines Klicks (d.h. das programmgesteuerte Erzeugen eines Klickereignisses) auf einem Kontrollkästchen mit Hilfe von DOM-Methoden.</p> + +<p><a href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">Sehen Sie sich das Beispiel in Aktion an.</a></p> + +<pre class="brush: js">function simulateClick() { + var event = new MouseEvent('click', { + view: window, + bubbles: true, + cancelable: true + }); + var cb = document.getElementById('checkbox'); + var cancelled = !cb.dispatchEvent(event); + if (cancelled) { + // A handler called preventDefault. + alert("cancelled"); + } else { + // None of the handlers called preventDefault. + alert("not cancelled"); + } +}</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/CustomEvent/CustomEvent">CustomEvent()</a></li> + <li>{{domxref("document.createEvent()")}}</li> + <li>{{domxref("Event.initEvent()")}}</li> + <li>{{domxref("EventTarget.dispatchEvent()")}}</li> + <li>{{domxref("EventTarget.addEventListener()")}}</li> +</ul> diff --git a/files/de/web/guide/events/index.html b/files/de/web/guide/events/index.html new file mode 100644 index 0000000000..9fbfac8b89 --- /dev/null +++ b/files/de/web/guide/events/index.html @@ -0,0 +1,53 @@ +--- +title: Event developer guide +slug: Web/Guide/Events +tags: + - DOM + - Event + - Guide + - NeedsTranslation + - NeedsUpdate + - TopicStub + - events +translation_of: Web/Guide/Events +--- +<p> </p> + +<p>Events bezieht sich sowohl auf ein Entwurfsmuster, das für die asynchrone Behandlung verschiedener Vorfälle, die während der Lebensdauer einer Webseite auftreten, als auch auf die Benennung, Charakterisierung und Verwendung einer großen Anzahl von Vorfällen unterschiedlicher Art.</p> + +<p>Die Übersichtsseite bietet eine Einführung in das Entwurfsmuster und eine Zusammenfassung der Arten von Vorfällen, die von modernen Webbrowsern definiert werden und darauf reagieren.</p> + +<p>Auf der Seite <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">Benutzerdefinierte Ereignisse</a> wird beschrieben, wie das Ereigniscode-Entwurfsmuster in benutzerdefiniertem Code verwendet werden kann, um neue Ereignistypen zu definieren, die von Benutzerobjekten ausgegeben werden, Listener-Funktionen zum Behandeln dieser Ereignisse zu registrieren und die Ereignisse im Benutzercode auszulösen.</p> + +<p>The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.</p> + +<p>The <strong>device</strong> on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation. </p> + +<p>The <strong>window</strong> in which the browser is displayed can trigger events; for example, change size if the user maximizes the window or otherwise changes it.</p> + +<p>The <strong>process</strong> loading of a web page can trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.</p> + +<p>The <strong>user interaction</strong> with the web page contents can trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction-driven events include:</p> + +<ul> + <li>the original 'click' event,</li> + <li>mouse events,</li> + <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li> + <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>, now deprecated.</li> +</ul> + +<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p> + +<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p> + +<p>The <strong>network requests</strong> made by a web page might trigger some events.</p> + +<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p> + +<div class="note"> +<p>Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.</p> +</div> + +<h2 id="Docs">Docs</h2> + +<p>{{LandingPageListSubpages}}</p> |