CommandEvent

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

Das CommandEvent-Interface stellt ein Ereignis dar, das den Benutzer benachrichtigt, wenn ein button-Element mit gültigen commandForElement- und command-Attributen dabei ist, ein interaktives Element aufzurufen.

Es ist das Ereignisobjekt für das HTMLElement-command-Ereignis, welches eine Aktion eines Invoker Controls darstellt, wenn es aufgerufen wird (zum Beispiel, wenn es angeklickt oder gedrückt wird).

Konstruktor

CommandEvent()

Erstellt ein CommandEvent-Objekt.

Instanzeigenschaften

Dieses Interface erbt Eigenschaften von seinem Elternteil, Event.

CommandEvent.source Nur lesbar

Ein HTMLButtonElement, das den Button darstellt, der diese Ausführung verursacht hat.

CommandEvent.command Nur lesbar

Ein String, der den command-Wert des Quellbuttons repräsentiert.

Beispiele

Einfaches Beispiel

html
<button commandfor="mypopover" command="show-popover">Show popover</button>

<div popover id="mypopover" role="[declare appropriate ARIA role]">
  <!-- popover content here -->
  <button commandfor="mypopover" command="hide-popover">Hide popover</button>
</div>
js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("command", (event) => {
  if (event.command === "show-popover") {
    console.log("Popover is about to be shown");
  }
});

Benutzerdefiniertes Beispiel

html
<button commandfor="the-image" command="--rotate-left">Rotate Left</button>

<button commandfor="the-image" command="--rotate-right">Rotate Right</button>

<img id="the-image" src="photo.jpg" alt="[add appropriate alt text here]" />
js
const image = document.getElementById("the-image");

image.addEventListener("command", (event) => {
  if (event.command == "--rotate-left") {
    event.target.style.rotate = "-90deg";
  } else if (event.command == "--rotate-right") {
    event.target.style.rotate = "90deg";
  }
});

Spezifikationen

No specification found

No specification data found for api.CommandEvent.
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.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch