htmx: Events

I had the need to listen for a particular htmx event to happen, and add some custom JavaScript code.

htmx allows us to do this using plain DOM events.

In this example I redirect to the / route after the request that was triggered by the HTML element with id equal to button-delete-project:

<script>
  document.addEventListener('htmx:afterRequest', function (event) {
    if ((event as CustomEvent).detail.target.id === 'button-delete-project') {
      window.location.href = '/'
    }
  })
</script>

The detail object attached to the event provides a lot of useful information.

You have a wide variety of events to listen to, including for example:

  • htmx:beforeRequest fired before an HTTP request is issued
  • htmx:beforeSwap fired before a DOM swap
  • htmx:timeout fired when a request timeout occurs

You should check https://htmx.org/events/ for the full list and documentation.

Lessons in this unit:

0: Introduction
1: Why htmx
2: The core idea of htmx
3: Installing htmx
4: Doing a GET request
5: Swap
6: POST request
7: Targets
8: Loading indicator
9: Confirming actions, and prompts
10: Triggers
11: Request headers
12: Response headers
13: ▶︎ Events
Want to learn more? Check out our courses