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: