Managing events with actions

Actions are a structure used by Stimulus to link events to controller functions. They are declared in the DOM by means of a data-action dataset with the following structure:

<div data-controller="aliasController">
<button
  data-action=
    "event->aliasController#functionOfTheController"
>Click me!</button>
</div>

It will only work if it is inside a controller with the same alias; you cannot place an action in DOMs outside the tree.

Following the example, we modify our button:

<input
  type="button"
  value="Transform"
  data-action="click->transformer#lowercaseToUppercase"
>

Let’s analyze what we have done with data-action, since it contains its own format that we must follow:

1. The event is click. It could be any other event, such as a submit event if we were in a HTML <form...