Invoker Commands API

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

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]" />

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

No specification found

No specification data found for api.CommandEvent,api.HTMLButtonElement.commandForElement,api.HTMLButtonElement.command.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

command Eigenschaft
commandForElement Eigenschaft
CommandEvent Schnittstelle