Invoker Commands API

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.

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 durch commandForElement referenzierten Element ausgelöst.

Erweiterungen zu anderen Schnittstellen

Instanzen-Eigenschaften

HTMLButtonElement.commandForElement

Ruft das von der Schaltfläche 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 von der Schaltfläche gesteuerten Element ausgeführt werden soll. Entspricht dem Wert des HTML-Attributs command.

Ereignisse

command Ereignis

Wird auf dem vom Button referenzierten Element ausgelöst.

Beispiele

Erstellen deklarativer Popovers

<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

<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

<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

Browser-Kompatibilität

api.CommandEvent

api.HTMLButtonElement.commandForElement

api.HTMLButtonElement.command

Siehe auch

• command Eigenschaft
• commandForElement Eigenschaft
• CommandEvent Schnittstelle