CommandEvent

Baseline 2025

Newly available

Since December 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

TheCommandEvent interface represents an event notifying the user when abutton element with validcommandForElement andcommand attributes is about to invoke an interactive element.

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

Constructor

CommandEvent(): Creates aCommandEvent object.

Instance properties

This interface inherits properties from its parent,Event.

CommandEvent.sourceRead only: AnHTMLButtonElement representing the button that caused this invocation.
CommandEvent.commandRead only: A string representing thecommand value of the source button.

Examples

Basic example

html

<button commandfor="mypopover" command="show-popover">Show popover</button><div popover role="[declare appropriate ARIA role]">  <!-- popover content here -->  <button commandfor="mypopover" command="hide-popover">Hide popover</button></div>

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

Using custom values for commands

In this example three buttons have been created withcommands with custom values.

html

<div>  <button commandfor="the-image" command="--rotate-left">Rotate Left</button>  <button commandfor="the-image" command="--reset">Reset</button>  <button commandfor="the-image" command="--rotate-right">Rotate Right</button></div><img   src="/shared-assets/images/examples/dino.svg"  alt="dinosaur head rotated 0 degrees" />

.controls {  margin-block-end: 20px;}

An event listener is attached to the image using thecommand event.When one of the buttons is clicked, the listener runs code based on the customcommand value assigned to the button, rotating the image and also updating it'salt text to indicate the new angle of the image.

const image = document.getElementById("the-image");image.addEventListener("command", (event) => {  let rotate = parseInt(event.target.style.rotate || "0", 10);  if (event.command === "--reset") {    rotate = 0;    event.target.style.rotate = `${rotate}deg`;  } else if (event.command === "--rotate-left") {    rotate = rotate === -270 ? 0 : rotate - 90;    event.target.style.rotate = `${rotate}deg`;  } else if (event.command === "--rotate-right") {    rotate = rotate === 270 ? 0 : rotate + 90;    event.target.style.rotate = `${rotate}deg`;  }  event.target.alt = `dinosaur head rotated ${rotate} degrees`;});