Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
CommandEvent
Baseline 2025Newly available
Since December 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
DieCommandEvent Schnittstelle stellt ein Ereignis dar, das den Benutzer benachrichtigt, wenn einbutton-Element mit gültigencommandForElement- undcommand-Attributen dabei ist, ein interaktives Element auszulösen.
Dies ist das Ereignisobjekt für dasHTMLElementcommand-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ütztEin
HTMLButtonElement, das den Button darstellt, der diese Auslösung verursacht hat.CommandEvent.commandSchreibgeschütztEin String, der den
command-Wert des Quell-Buttons darstellt.
Beispiele
Einfaches Beispiel
<button commandfor="mypopover" command="show-popover">Show popover</button><div popover 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 mitcommands mit benutzerdefinierten Werten erstellt.
<div> <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 src="/shared-assets/images/examples/dino.svg" alt="dinosaur head rotated 0 degrees" />.controls { margin-block-end: 20px;}Ein Ereignis-Listener wird an das Bild mit demcommand-Ereignis angehängt. Wenn einer der Buttons angeklickt wird, führt der Listener Code basierend auf dem benutzerdefiniertencommand-Wert aus, der dem Button zugewiesen wurde, rotiert das Bild und aktualisiert auch seinenalt-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 |