1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
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>
|
