1 files changed, 136 insertions, 0 deletions
diff --git a/files/de/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/de/orphaned/web/guide/events/creating_and_triggering_events/index.html
new file mode 100644
index 0000000000..82ea9c1b7a
--- /dev/null
+++ b/files/de/orphaned/web/guide/events/creating_and_triggering_events/index.html
@@ -0,0 +1,136 @@
+---
+title: Erstellen und Auslösen von Ereignissen
+slug: orphaned/Web/Guide/Events/Creating_and_triggering_events
+translation_of: Web/Guide/Events/Creating_and_triggering_events
+original_slug: 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">&lt;form&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;
+&lt;/form&gt;
+</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: () =&gt; 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 =&gt; 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 =&gt; 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">&lt;form&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;
+&lt;/form&gt;
+</pre>
+
+<pre class="brush: js">const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+form.addEventListener('awesome', e =&gt; 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: () =&gt; 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>