Invoker Commands API

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die Invoker Commands API bietet eine Möglichkeit, Schaltflächen deklarativ Verhaltensweisen zuzuweisen, um interaktive Elemente zu steuern, wenn die Schaltfläche betätigt wird (durch Klicken oder über eine Tasteneingabe, wie die Leertaste oder die Eingabetaste).

Konzepte und Verwendung

Ein häufiges Muster im Web ist es, <button>-Elemente zur Steuerung verschiedener Aspekte der Seite zu verwenden, wie z. B. das Öffnen und Schließen von Popovers oder <dialog>-Elementen, das Formatieren von Text und mehr.

Historisch gesehen erforderte die Erstellung dieser Art von Steuerungen JavaScript-Ereignislistener, die dem Button hinzugefügt wurden, um dann die APIs auf dem Element aufzurufen, das sie steuern. Die Eigenschaften commandForElement und command bieten eine Möglichkeit, dies für eine begrenzte Anzahl von Aktionen deklarativ zu tun. Dies kann vorteilhaft für eingebaute Befehle sein, da der Benutzer nicht darauf warten muss, dass JavaScript heruntergeladen und ausgeführt wird, um diese Schaltflächen interaktiv zu machen.

HTML-Attribute

commandfor Experimentell

Wandelt ein <button>-Element in eine Schaltfläche um, die das angegebene interaktive Element steuert; nimmt die ID des zu steuernden Elements als Wert.

command Experimentell

Gibt die Aktion an, die auf einem durch eine Steuerungs-<button> gesteuerten Element ausgeführt werden soll, spezifiziert über das commandfor-Attribut.

Schnittstellen

CommandEvent Experimentell

Stellt ein Ereignis dar, das den Benutzer darüber informiert, dass ein Befehl ausgegeben wurde. Es ist das Ereignisobjekt für das command-Ereignis. Das Ereignis wird auf dem Element ausgelöst, das durch commandForElement referenziert wird.

Erweiterungen zu anderen Schnittstellen

Instanzeigenschaften

HTMLButtonElement.commandForElement

Holt und setzt das von der Schaltfläche gesteuerte Element. Das JavaScript-Äquivalent des HTML-Attributs commandfor.

HTMLButtonElement.command

Holt und setzt die Aktion, die auf dem von der Schaltfläche gesteuerten Element ausgeführt werden soll. Spiegelt den Wert des HTML-Attributs command wider.

Ereignisse

command Ereignis

Wird auf dem durch die Schaltfläche referenzierten Element ausgelöst.

Beispiele

Deklarative Popovers erstellen

html
<button commandfor="mypopover" command="toggle-popover">
  Toggle the popover
</button>
<div id="mypopover" popover>
  <button commandfor="mypopover" command="hide-popover">Close</button>
  Popover content
</div>

Deklarative Dialoge erstellen

html
<button commandfor="mydialog" command="show-modal">Show modal dialog</button>
<dialog id="mydialog">
  <button commandfor="mydialog" command="close">Close</button>
  Dialog Content
</dialog>

Benutzerdefinierte Befehle erstellen

html
<button commandfor="my-img" command="--rotate-left">Rotate left</button>
<button commandfor="my-img" command="--rotate-right">Rotate right</button>
<img id="my-img" src="photo.jpg" alt="[add appropriate alt text here]" />
js
const myImg = document.getElementById("my-img");

myImg.addEventListener("command", (event) => {
  if (event.command == "--rotate-left") {
    myImg.style.rotate = "-90deg";
  } else if (event.command == "--rotate-right") {
    myImg.style.rotate = "90deg";
  }
});

Spezifikationen

Specification
HTML
# commandevent
HTML
# dom-button-commandforelement
HTML
# dom-button-command

Browser-Kompatibilität

api.CommandEvent

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CommandEvent
Experimental
CommandEvent() constructor
Experimental
command
Experimental
source
Experimental

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.

api.HTMLButtonElement.commandForElement

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
commandForElement
Experimental

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.

api.HTMLButtonElement.command

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
command
Experimental

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.

Siehe auch