CommandEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used 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 |