Invoker Commands API

Baseline 2025

Neu verfügbar

Seit December 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

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

In diesem Artikel

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 erforderten die Erstellung dieser Art von Steuerungen JavaScript-Ereignislistener, die der Schaltfläche hinzugefügt wurden, um dann die APIs auf dem von ihnen gesteuerten Element aufzurufen. Die Eigenschaften commandForElement und command bieten eine Möglichkeit, dies deklarativ für eine begrenzte Anzahl von Aktionen zu tun. Dies kann vorteilhaft für integrierte 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

Wandelt ein <button>-Element in einen Befehlsauslöser um, der das angegebene interaktive Element steuert; nimmt die ID des zu steuernden Elements als Wert.

command

Gibt die Aktion an, die auf einem vom Steuerungselement <button> gesteuerten Element ausgeführt werden soll, das über das Attribut commandfor angegeben wird.

HTMLButtonElement.command

Ruft die Aktion ab und legt sie fest, die auf dem von der Schaltfläche gesteuerten Element ausgeführt werden soll. Entspricht dem Wert des HTML-Attributs command.

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>

Erstellen 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>

Erstellen 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";
  }
});