CommandEvent
Baseline
2025
Neu verfügbar
Seit Dezember 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Das CommandEvent-Interface repräsentiert ein Ereignis, das den Benutzer benachrichtigt, wenn ein button-Element mit gültigen commandForElement- und command-Attributen im Begriff ist, ein interaktives Element aufzurufen.
Dies ist das Ereignisobjekt für das HTMLElement-command-Ereignis, das eine Aktion eines Invoker Controls darstellt, wenn es aufgerufen wird (zum Beispiel, wenn es angeklickt oder gedrückt wird).
Konstruktor
CommandEvent()-
Erstellt ein
CommandEvent-Objekt.
Instanz-Eigenschaften
Dieses Interface erbt Eigenschaften von seinem Elternteil, Event.
CommandEvent.sourceSchreibgeschützt-
Ein
HTMLButtonElement, das den Button repräsentiert, der diese Ausführung verursacht hat. CommandEvent.commandSchreibgeschützt-
Ein String, der den
command-Wert des Ursprungsbuttons repräsentiert.
Beispiele
Grundlegendes 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");
}
});
Verwenden von benutzerdefinierten Werten für Befehle
In diesem Beispiel wurden drei Buttons mit Befehlen 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 gebunden, der das command-Ereignis verwendet.
Wenn einer der Buttons angeklickt wird, führt der Listener Code basierend auf dem benutzerdefinierten command-Wert aus, der dem Button zugewiesen wurde, dreht 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
| Spezifikation |
|---|
| HTML # commandevent |