CommandEvent

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

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 Schreibgeschützt

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

CommandEvent.command Schreibgeschützt

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