CommandEvent
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die CommandEvent
-Schnittstelle stellt ein Ereignis dar, das den Benutzer benachrichtigt, wenn ein button
-Element mit gültigen Attributen commandForElement
und command
ein interaktives Element auslösen soll.
Dies ist das Ereignisobjekt für das HTMLElement
-command
-Ereignis, das eine Aktion eines "Invoker Control" repräsentiert, wenn es ausgelöst wird (zum Beispiel durch Klick oder Drücken).
Konstruktor
CommandEvent()
Experimentell-
Erstellt ein
CommandEvent
-Objekt.
Instanzeigenschaften
Diese Schnittstelle erbt Eigenschaften von ihrem Elternobjekt Event
.
CommandEvent.source
Schreibgeschützt Experimentell-
Ein
HTMLButtonElement
, das den Button repräsentiert, der diese Ausführung ausgelöst hat. CommandEvent.command
Schreibgeschützt Experimentell-
Ein String, der den
command
-Wert des verursachenden 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");
}
});
Benutzerdefiniertes Beispiel
<button commandfor="the-image" command="--rotate-left">Rotate Left</button>
<button commandfor="the-image" command="--rotate-right">Rotate Right</button>
<img id="the-image" src="photo.jpg" alt="[add appropriate alt text here]" />
const image = document.getElementById("the-image");
image.addEventListener("command", (event) => {
if (event.command == "--rotate-left") {
event.target.style.rotate = "-90deg";
} else if (event.command == "--rotate-right") {
event.target.style.rotate = "90deg";
}
});
Spezifikationen
Specification |
---|
HTML # commandevent |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
CommandEvent | ||||||||||||
CommandEvent() constructor | ||||||||||||
command | ||||||||||||
source |
Legend
Tip: you can click/tap on a cell for more information.
- No support
- No support
- Experimental. Expect behavior to change in the future.
- User must explicitly enable this feature.