ToggleEvent: source-Eigenschaft

Die source schreibgeschützte Eigenschaft der ToggleEvent-Schnittstelle ist eine Element-Objektinstanz, die das HTML-Popover-Steuerelement darstellt, das das Umschalten ausgelöst hat.

Wert

Eine Element-Objektinstanz oder null, wenn das Popover nicht durch ein Steuerelement aktiviert wurde.

Ein <button>-Element kann als Popover-Steuerelement festgelegt werden, indem die id des Popover-Elements in seinem commandfor- oder popovertarget-Attribut angegeben wird (wenn die Schaltfläche mit <input type="button"> spezifiziert wird, funktioniert nur das popovertarget-Attribut).

Wenn das toggle-Ereignis auf dem Popover ausgelöst wird, enthält die source-Eigenschaft des ToggleEvent-Ereignisobjekts einen Verweis auf die Popover-Steuerschaltfläche, die das Umschalten ausgelöst hat. Dies ist nützlich, um bei der Reaktion auf das toggle-Ereignis je nach auslösendem Steuerelement unterschiedlichen Code auszuführen (siehe ein Beispiel).

Bevor die source-Eigenschaft verfügbar war, mussten Entwickler die Funktionalität des command-Attributs von Grund auf neu implementieren, um eine ähnliche Kennung bereitzustellen, und diese dann mit JavaScript überwachen, um zu wissen, welche Schaltfläche das Popover aufgerufen hat. Zusätzlich bestand die Gefahr, dass solche JavaScript-Aufgaben das Anzeigen oder Verbergen des Popovers blockierten. Das toggle-Ereignis ist asynchron und vermeidet daher dieses Problem.

Wenn das Popover nicht durch eine Steuerschaltfläche aktiviert wurde — zum Beispiel, wenn das Popover durch eine JavaScript-Methode wie HTMLElement.togglePopover() gesteuert wird — gibt die source-Eigenschaft null zurück.

Beispiele

Grundlegende Verwendung der `source`-Eigenschaft

Dieses Demo zeigt, wie man die source-Eigenschaft verwendet, um eine unterschiedliche Aktion je nach verwendeter Steuerschaltfläche zum Schließen eines Popovers auszuführen.

HTML

Unser Markup enthält ein <button>, ein <p> und ein <div>-Element. Das <div> ist als auto Popover definiert, und die Schaltfläche ist als Steuerung zum Anzeigen des Popovers mithilfe der commandfor- und command-Attribute festgelegt.

Das Popover enthält eine Überschrift, die den Benutzer fragt, ob er einen Cookie möchte, und zwei Schaltflächen, mit denen er eine Antwort "ja" oder "nein" auswählen kann. Jede dieser Schaltflächen ist als Steuerung zum Verbergen des Popovers definiert.

html

<button commandfor="popover" command="show-popover">
  Select cookie preference
</button>
<p id="output"></p>
<div id="popover" popover="auto">
  <h3>Would you like a cookie?</h3>
  <button id="yes" commandfor="popover" command="hide-popover">Yes</button>
  <button id="no" commandfor="popover" command="hide-popover">No</button>
</div>

html {
  font-family: sans-serif;
}

[popover] {
  border: 1px solid grey;
  padding: 10px 20px;
  border-radius: 5px;
}

[popover] h3 {
  margin: 0 0 10px;
}

JavaScript

In unserem Skript beginnen wir mit dem Erfassen von Referenzen zu den "ja" und "nein" Schaltflächen, dem Popover und dem Ausgabe-<p>.

const yesBtn = document.getElementById("yes");
const noBtn = document.getElementById("no");
const popover = document.getElementById("popover");
const output = document.getElementById("output");

Wir fügen dann eine Funktionsprüfung hinzu, um zu erkennen, ob das HTML-command-Attribut unterstützt wird und ob die source-Eigenschaft unterstützt wird. Wenn eines der beiden nicht unterstützt wird, geben wir eine entsprechende Nachricht an das Ausgabe-<p> aus. Wenn beide unterstützt werden, fügen wir einen toggle-Ereignislistener zum Popover hinzu. Bei Auslösung wird überprüft, ob die "ja"- oder "nein"-Schaltfläche zum Umschalten (Verbergen) des Popovers verwendet wurde; in jedem Fall wird eine entsprechende Nachricht im Ausgabe-<p> ausgegeben.

if (yesBtn.command === undefined) {
  output.textContent = "Popover control command attribute not supported.";
} else {
  popover.addEventListener("toggle", (event) => {
    if (event.source === undefined) {
      output.textContent = "ToggleEvent.source not supported.";
    } else if (event.source === yesBtn) {
      output.textContent = "Cookie set!";
    } else if (event.source === noBtn) {
      output.textContent = "No cookie set.";
    }
  });
}