EventTarget: when()-Methode
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die when()-Methode der EventTarget-Schnittstelle gibt ein Observable-Objekt zurück, das einen Strom von Ereignissen repräsentiert, die auf dem EventTarget ausgelöst werden, auf dem die Methode aufgerufen wird.
Sie können auf dem zurückgegebenen Observable subscribe() aufrufen, um den Ereignisstrom zu abonnieren.
Das zurückgegebene Observable verwendet im Hintergrund einen Event Listener, wie er auch durch EventTarget.addEventListener() erstellt wird. Die Erstellung dieses Listeners, seine gemeinsame Nutzung durch Observer und seine Entfernung folgen demselben Lebenszyklus wie das Subscriber-Objekt eines benutzerdefinierten Observables.
Hinweis:
Dieses Verhalten bei gemeinsam genutzten Abonnements kann sich ändern. Ein Vorschlag, jedem Observer einen eigenen Subscriber zu geben, würde dazu führen, dass jedes Abonnement eine separate Ausführung startet, statt ein aktives Abonnement wiederzuverwenden.
Syntax
when(type)
when(type, options)
Parameter
type-
Eine Zeichenfolge, bei der die Groß- und Kleinschreibung beachtet wird und die den Ereignistyp angibt, auf den gewartet werden soll.
optionsOptional-
Ein Objekt, das Eigenschaften des Event Listeners festlegt. Folgende Optionen sind verfügbar:
captureOptional-
Ein boolescher Wert, der angibt, dass Ereignisse des angegebenen Typs an den im Hintergrund registrierten Listener weitergeleitet werden, bevor sie an ein darunterliegendes
EventTargetim DOM-Baum weitergeleitet werden. Wenn die Option nicht angegeben wird, ist der Standardwertfalse. passiveOptional-
Ein boolescher Wert, der bei
trueangibt, dass Callbacks, die die Ereignisse verarbeiten, niemalspreventDefault()aufrufen. Ruft ein passiver ListenerpreventDefault()auf, hat dies keine Wirkung und es kann eine Warnung in der Konsole ausgegeben werden.Wenn diese Option nicht angegeben wird, gilt derselbe Standardwert wie bei
addEventListener(). Weitere Informationen finden Sie unter Passive Listener verwenden.
Rückgabewert
Ein Observable.
Beispiele
when() verwenden
Dieses Beispiel ist eine einfache Anwendung zum Zählen von Klicks.
HTML
Das Markup enthält ein <button>-Element zum Anklicken und ein <p>-Element zur Anzeige der Anzahl der Klicks.
<button>Click me</button>
<p>Click count: 0</p>
JavaScript
Wir rufen when("click") auf btn auf und erhalten so ein Observable für den click-Ereignisstrom. Anschließend rufen wir subscribe() auf dem Observable auf, um die Funktion increment() zu abonnieren. Sie wird dadurch bei jedem Klick auf den Button aufgerufen.
const btn = document.querySelector("button");
const para = document.querySelector("p");
let countValue = 0;
function increment() {
countValue++;
para.textContent = `Click count: ${countValue}`;
}
btn.when("click").subscribe(increment);
Hinweis:
In diesem Beispiel sind .when("click").subscribe(increment) und .addEventListener("click", increment) nahezu gleichwertig. Mit when() können Sie jedoch Ereignisströme mithilfe von Observables kombinieren. Der Leitfaden Observables verwenden enthält weitere Beispiele.
Ergebnis
Das gerenderte Ergebnis sieht wie folgt aus:
Klicken Sie auf den Button, um zu sehen, wie sich der Klickzähler erhöht.
Spezifikationen
| Spezifikation |
|---|
| Observable # dom-eventtarget-when |