CommandEvent
Baseline
2025
Newly available
Since December 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die CommandEvent Schnittstelle stellt ein Ereignis dar, das den Benutzer benachrichtigt, wenn ein button-Element mit gültigen commandForElement- und command-Attributen dabei ist, ein interaktives Element auszulösen.
Dies ist das Ereignisobjekt für das HTMLElement command-Ereignis, das eine Aktion von einem Invoker Control darstellt, wenn es ausgelöst wird (zum Beispiel, wenn es angeklickt oder gedrückt wird).
Konstruktor
CommandEvent()-
Erstellt ein
CommandEvent-Objekt.
Instanzeigenschaften
Diese Schnittstelle erbt Eigenschaften von ihrem übergeordneten Objekt, Event.
CommandEvent.sourceSchreibgeschützt-
Ein
HTMLButtonElement, das den Button darstellt, der diese Auslösung verursacht hat. CommandEvent.commandSchreibgeschützt-
Ein String, der den
command-Wert des Quell-Buttons darstellt.
Beispiele
Einfaches Beispiel
<button commandfor="mypopover" command="show-popover">Show popover</button>
<div popover id="mypopover" role="[declare appropriate ARIA role]">
<!-- popover content here -->
<button commandfor="mypopover" command="hide-popover">Hide popover</button>
</div>
const popover = document.getElementById("mypopover");
// …
popover.addEventListener("command", (event) => {
if (event.command === "show-popover") {
console.log("Popover is about to be shown");
}
});
Verwendung benutzerdefinierter Werte für Befehle
In diesem Beispiel wurden drei Buttons mit commands mit benutzerdefinierten Werten erstellt.
<div class="controls">
<button commandfor="the-image" command="--rotate-left">Rotate Left</button>
<button commandfor="the-image" command="--reset">Reset</button>
<button commandfor="the-image" command="--rotate-right">Rotate Right</button>
</div>
<img
id="the-image"
src="/shared-assets/images/examples/dino.svg"
alt="dinosaur head rotated 0 degrees" />
Ein Ereignis-Listener wird an das Bild mit dem command-Ereignis angehängt. Wenn einer der Buttons angeklickt wird, führt der Listener Code basierend auf dem benutzerdefinierten command-Wert aus, der dem Button zugewiesen wurde, rotiert das Bild und aktualisiert auch seinen alt-Text, um den neuen Winkel des Bildes anzuzeigen.
const image = document.getElementById("the-image");
image.addEventListener("command", (event) => {
let rotate = parseInt(event.target.style.rotate || "0", 10);
if (event.command === "--reset") {
rotate = 0;
event.target.style.rotate = `${rotate}deg`;
} else if (event.command === "--rotate-left") {
rotate = rotate === -270 ? 0 : rotate - 90;
event.target.style.rotate = `${rotate}deg`;
} else if (event.command === "--rotate-right") {
rotate = rotate === 270 ? 0 : rotate + 90;
event.target.style.rotate = `${rotate}deg`;
}
event.target.alt = `dinosaur head rotated ${rotate} degrees`;
});
Spezifikationen
| Specification |
|---|
| HTML # commandevent |