update invokers to "command" naming

files/en-us/web/api/commandevent/index.md

@@ -0,0 +1,72 @@
+---
+title: CommandEvent
+slug: Web/API/CommandEvent
+page-type: web-api-interface
+browser-compat: api.CommandEvent
+---
+
+{{APIRef("UI Events")}}
+
+The **`CommandEvent`** interface represents an event notifying the user when a {{domxref("HTMLButtonElement", "button")}} element with valid {{domxref("HTMLButtonElement.commandForElement", "commandForElement")}} and {{domxref("HTMLButtonElement.command", "command")}} attributes is about to invoke an interactive element.
+
+It is the event object for the `HTMLElement` {{domxref("HTMLElement.invoke_event", "invoke")}} event, which represents an action from an Invoker Control it is invoked (for example when it is clicked or pressed).
+
+{{InheritanceDiagram}}
+
+## Constructor
+
+- {{domxref("CommandEvent.CommandEvent", "CommandEvent()")}}
+  - : Creates an `CommandEvent` object.
+
+## Instance properties
+
+_This interface inherits properties from its parent, {{DOMxRef("Event")}}._
+
+- {{domxref("CommandEvent.source")}} {{ReadOnlyInline}}
+  - : An Element representing the control button that caused this invocation.
+- {{domxref("CommandEvent.command")}} {{ReadOnlyInline}}
+  - : A string representing the {{domxref("HTMLButtonElement.command", "command")}} value of the source control button.
+
+## Examples
+
+### Basic example
+
+```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
+
+```js
+const myImage = document.querySelector("img");
+
+// ...
+
+myImage.addEventListener("command", (event) => {
+  if (event.command === "--rotate-right") {
+    console.log("My own custom invoke behavior");
+    myImage.style.rotate = "90deg";
+  }
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [command](/en-US/docs/Web/API/HTMLButtonElement/command)
+- [commandForElement](/en-US/docs/Web/API/HTMLButtonElement/commandForElement)

files/en-us/web/api/htmlbuttonelement/command/index.md

@@ -0,0 +1,58 @@
+---
+title: "HTMLButtonElement: command property"
+short-title: command
+slug: Web/API/HTMLButtonElement/command
+page-type: web-api-instance-property
+browser-compat: api.HTMLButtonElement.command
+---
+
+{{ APIRef("DOM") }}
+
+The **`command`** property of the {{domxref("HTMLButtonElement")}} interface gets and sets the action to be performed on an element being controlled by a button. For this to have an effect, [`commandfor`](/en-US/docs/Web/HTML/Element/button#commandfor) must be set.
+
+It reflects the [`command`](/en-US/docs/Web/HTML/Element/button#command) HTML attribute.
+
+## Value
+
+A string.
+
+### Basic example
+
+```js
+const popover = document.getElementById("mypopover");
+const toggleBtn = document.getElementById("toggleBtn");
+
+toggleBtn.command = "show-popover";
+```
+
+### Custom example, using events
+
+```js
+const toggleBtn = document.getElementById("toggleBtn");
+const myImage = document.querySelector("img");
+
+toggleBtn.commandForElement = myImage;
+
+// Set a custom "command", must start with two hyphen characters (`--`)
+toggleBtn.command = "--rotate-right";
+
+myImage.addEventListener("command", (event) => {
+  if (event.command === "--rotate-right") {
+    console.log("My own custom invoke behavior");
+    myImage.style.rotate = "90deg";
+  }
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [commandForElement](/en-US/docs/Web/API/HTMLButtonElement/commandForElement)
+- [CommandEvent](/en-US/docs/Web/API/CommandEvent)

files/en-us/web/api/htmlbuttonelement/commandforelement/index.md

@@ -0,0 +1,39 @@
+---
+title: "HTMLButtonElement: commandForElement property"
+short-title: commandForElement
+slug: Web/API/HTMLButtonElement/commandForElement
+page-type: web-api-instance-property
+browser-compat: api.HTMLButtonElement.commandForElement
+---
+
+{{ APIRef("DOM") }}
+
+The **`commandForElement`** property of the {{domxref("HTMLButtonElement")}} interface gets and sets the element to control via a button.
+
+It is the JavaScript equivalent of the [`commandfor`](/en-US/docs/Web/HTML/Element/button#invoketarget) HTML attribute.
+
+## Value
+
+A reference to an element in the DOM.
+
+## Examples
+
+```js
+const popover = document.getElementById("mypopover");
+const toggleBtn = document.getElementById("toggleBtn");
+
+toggleBtn.commandForElement = popover;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [command](/en-US/docs/Web/API/HTMLButtonElement/command)
+- [CommandEvent](/en-US/docs/Web/API/CommandEvent)