Invokers Command API

The upcoming Invoker Commands API introduces a new way to invoke JavaScript events on elements through buttons. Of course, this was already possible so let me explain the difference.

Traditionally, you would:

1. Find the button element and an event listener to the button.
2. Find the element you want to control.
3. Execute JavaScript to manipulate the element.

This new Invoker Command API lets you skip all three steps by introducing two new HTML attributes to the HTML button element:

commandfor	Turns a button element into a button, controlling the given interactive element; takes the ID of the element to control as its value.
command	Specifies the action to be performed on an element being controlled

Providing arguments to the invoked action is also possible. This does require setting up an event listener but with a major improvement over the traditional way: the event listener is added to the manipulated element instead of to the buttons.

Why it matters

Reduced complexity – Events are tied directly to the controlled element, meaning less searching for where an event actually comes from.

Learn more

• https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API
• https://www.youtube.com/watch?v=Ctb9-Bb2j-Y