Invoker Commands API

Die Invoker Commands API bietet eine Möglichkeit, Schaltflächen deklarativ Verhalten zuzuweisen, wodurch interaktive Elemente gesteuert werden können, wenn die Schaltfläche aktiviert (geklickt oder über eine Tastatureingabe wie die Leertaste oder die Eingabetaste aufgerufen) wird.

Konzepte und Verwendung

Ein häufiges Muster im Web ist, dass <button>-Elemente verschiedene Aspekte der Seite steuern, wie das Öffnen und Schließen von Popovers oder <dialog>-Elementen, das Formatieren von Text und mehr.

Historisch gesehen erforderte die Erstellung dieser Art von Steuerelementen JavaScript-Ereignislistener, die der Schaltfläche hinzugefügt wurden, wodurch die APIs auf das von ihnen gesteuerte Element aufgerufen werden konnten. Die Eigenschaften commandForElement und command bieten eine Möglichkeit, dies deklarativ für eine begrenzte Anzahl von Aktionen zu tun. Dies kann für integrierte Befehle vorteilhaft 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

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

command

Gibt die Aktion an, die auf einem Element ausgeführt werden soll, das von einer Steuerungs<button> gesteuert wird, die über das Attribut commandfor angegeben wird.

Schnittstellen

CommandEvent

Repräsentiert ein Ereignis, 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

Ruft das vom Button gesteuerte Element ab und legt es fest. Das JavaScript-Äquivalent des HTML-Attributs commandfor.

HTMLButtonElement.command

Ruft die Aktion ab und legt sie fest, die auf dem vom Button gesteuerten Element ausgeführt werden soll. Entspricht dem Wert des HTML-Attributs command.

Ereignisse

command Ereignis

Wird auf dem Element ausgelöst, das durch den Button referenziert wird.

Beispiele

Erstellung deklarativer Popovers

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>

Erstellung deklarativer Dialoge

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

Erstellung benutzerdefinierter Befehle

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

api.HTMLButtonElement.commandForElement

api.HTMLButtonElement.command

Siehe auch