CommandEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das CommandEvent Interface repräsentiert ein Ereignis, das den Benutzer informiert, wenn ein button-Element mit gültigen commandForElement und command-Attributen dabei ist, ein interaktives Element aufzurufen.
Dies ist das Ereignisobjekt für das command-Ereignis von HTMLElement, welches eine Aktion von einem Invoker Control 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 Elterninterface, Event.
CommandEvent.sourceSchreibgeschützt-
Ein
HTMLButtonElement, das den Button repräsentiert, der diese Aktion ausgelöst hat. CommandEvent.commandSchreibgeschützt-
Ein String, der den
command-Wert des Quellbuttons repräsentiert.
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 von benutzerdefinierten Werten 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 Event-Listener wird an das Bild mithilfe des command-Ereignisses angehängt.
Wenn einer der Buttons angeklickt wird, führt der Listener Code basierend auf dem benutzerdefinierten command-Wert aus, der dem Button zugewiesen ist, rotiert das Bild und aktualisiert auch dessen 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");
if (event.command == "--reset") {
rotate = 0;
event.target.style.rotate = `${rotate}deg`;
} else if (event.command === "--rotate-left") {
rotate === -270 ? (rotate = 0) : (rotate = rotate - 90);
event.target.style.rotate = `${rotate}deg`;
} else if (event.command === "--rotate-right") {
rotate === 270 ? (rotate = 0) : (rotate = rotate + 90);
event.target.style.rotate = `${rotate}deg`;
}
event.target.alt = `dinosaur head rotated ${rotate} degrees`;
});
Spezifikationen
| Specification |
|---|
| HTML # commandevent |
Browser-Kompatibilität
Loading…