CommandEvent

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The CommandEvent interface represents an event notifying the user when a button element with valid commandForElement and command attributes is about to invoke an interactive element.

It is the event object for the HTMLElement command event, which represents an action from an Invoker Control it is invoked (for example when it is clicked or pressed).

Constructor

CommandEvent()

Creates an CommandEvent object.

Instance properties

This interface inherits properties from its parent, Event.

CommandEvent.source Read only

An HTMLButtonElement representing the button that caused this invocation.

CommandEvent.command Read only

A string representing the command value of the source button.

Examples

Basic example

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

Custom example

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

Specifications

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 compatibility

BCD tables only load in the browser

See also