actions_events

📣 Using Actions for Events

Stimulus Actions map DOM events to controller methods declaratively. This keeps JS clean and HTML-driven.

<button data-controller="hello"
        data-action="mouseenter->hello#highlight mouseleave->hello#removeHighlight">
  Hover me!
</button>

// hello_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  highlight() {
    this.element.classList.add("highlight")
  }

  removeHighlight() {
    this.element.classList.remove("highlight")
  }
}