Invoker Commands API

Konzepte und Verwendung

Ein hufiges Muster im Web ist, dass <button>-Elemente verschiedene Aspekte der Seite steuern, wie das ffnen und Schlieen von Popovers oder <dialog>-Elementen, das Formatieren von Text und mehr.

Historisch gesehen erforderten die Erstellung dieser Art von Steuerungen JavaScript-Ereignislistener, die der Schaltflche hinzugefgt wurden, um dann die APIs auf dem von ihnen gesteuerten Element aufzurufen. Die Eigenschaften commandForElement und command bieten eine Mglichkeit, dies deklarativ fr eine begrenzte Anzahl von Aktionen zu tun. Dies kann vorteilhaft fr integrierte Befehle sein, da der Benutzer nicht darauf warten muss, dass JavaScript heruntergeladen und ausgefhrt wird, um diese Schaltflchen interaktiv zu machen.

HTML-Attribute

commandfor

Wandelt ein <button>-Element in einen Befehlsauslser 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 ausgefhrt werden soll, das ber das Attribut commandfor angegeben wird.

Schnittstellen

CommandEvent

Reprsentiert ein Ereignis, das den Benutzer darber informiert, dass ein Befehl ausgegeben wurde. Es ist das Ereignisobjekt fr das command-Ereignis. Das Ereignis wird auf dem durch commandForElement referenzierten Element ausgelst.

Erweiterungen zu anderen Schnittstellen

Instanzen-Eigenschaften

HTMLButtonElement.commandForElement

Ruft das von der Schaltflche 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 Schaltflche gesteuerten Element ausgefhrt werden soll. Entspricht dem Wert des HTML-Attributs command.

Ereignisse

command Ereignis

Wird auf dem vom Button referenzierten Element ausgelst.

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

api.CommandEvent

api.HTMLButtonElement.commandForElement

api.HTMLButtonElement.command

Siehe auch

• command Eigenschaft
• commandForElement Eigenschaft
• CommandEvent Schnittstelle