HTMX - Events

HTMX provides a rich event system that allows you to hook into various points in the HTMX request lifecycle. These events can be used to add custom behavior, modify requests, or respond to different states of HTMX operations.

Core HTMX Events

There are 4 types of core events in HTMX as listed below.

Request Lifecycle Events

• htmx:beforeRequest: Triggered before an AJAX request is made.
• htmx:beforeSend: Triggered just before the request is sent.
• htmx:afterRequest: Triggered after an AJAX request has completed.
• htmx:afterSettle: Triggered after the DOM has settled.
• htmx:xhr:loadstart: Triggered when the request starts.
• htmx:xhr:loadend: Triggered when the request ends.
• htmx:xhr:progress: Triggered periodically during a request.

Response Events

• htmx:beforeOnLoad: Triggered before new content is swapped in.
• htmx:afterOnLoad: Triggered after new content is swapped in.
• htmx:onLoadError: Triggered when an error occurs during the swap.

Trigger Events

• htmx:trigger: Triggered when an element is triggered via HTMX.
• htmx:validate: Triggered before an element is validated.
• htmx:validation:validate: Triggered when an input is about to be validated.
• htmx:validation:failed: Triggered when an input fails validation.
• htmx:validation:halted: Triggered when a request is halted due to validation errors.

WebSocket and SSE Events

• htmx:wsOpen: Triggered when a WebSocket connection is opened.
• htmx:wsClose: Triggered when a WebSocket connection is closed.
• htmx:wsBeforeMessage: Triggered before a WebSocket message is processed.
• htmx:wsAfterMessage: Triggered after a WebSocket message is processed.
• htmx:sseOpen: Triggered when an SSE connection is opened.
• htmx:sseMessage: Triggered when an SSE message is received.

Handling HTMX Events

You can listen for HTMX events using standard JavaScript event listeners.

document.body.addEventListener('htmx:afterOnLoad', function(event) {
    console.log('Content loaded!', event.detail.elt);
});

// Or using the `htmx.on()` method:

htmx.on('htmx:afterOnLoad', function(event) {
    console.log('Content loaded!', event.detail.elt);
});