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
14:	Redirect after request
15:	Send files using htmx.ajax()
16:	Perform something on page load
17:	Conditionally hide HTML elements based on HTMX request status
18:	htmx + Alpine template tag
19:	htmx, include hidden input fields outside of a form
20:	htmx trigger request via JS event