Thecommand event of theHTMLElement interface fires on an element that is controlled via abutton with validcommandForElement andcommand values, whenever the button is interacted with (e.g., it is clicked).

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("command", (event) => { })oncommand = (event) => { }

Event type

ACommandEvent. Inherits fromEvent.

Examples

Basic example

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

Event dispatch and cancellation

It is worth pointing out thatcommand events fire on the element being invoked. If the button is clicked, it will first dispatch aclick event which, if cancelled, then thecommand event will not fire and the default behavior will not be run.In addition to cancelling theclick event on the button, it is also possible to cancel thecommand event.

For example:

button.addEventListener("click", (event) => {  event.preventDefault(); // the `command` event will never fire});

element.addEventListener("command", (event) => {  event.preventDefault(); // the `command` event fires but the default behavior is cancelled});

Specifications

Browser compatibility

See also

• Invoker Commands API
• HTMLButtonElement.command
• HTMLButtonElement.commandForElement