What Events can HTMX Respond To?

Any HTML element with the hx-trigger="..." attribute can listen for and react to events. Examples of triggers that HTMX can react to:

load

When the page has loaded

click

When an element is clicked

mouseenter

When the mouse entered an element

keyup

When a key is released whilst typing

revealed

When an element scrolls into view

every Xs

Regularly, every X seconds

The full list, including modifiers for delays, throttling, etc. can be found here.

Examples of useful modifiers:

once

The event will only trigger once (e.g. the first click)

delay:Xs

Delay the event by X seconds

changed

The event will only trigger if the value of the element (e.g. an input) has changed

Page Load Trigger

An element with the hx-trigger="load" attribute will be triggered when the element is loaded into the page.

In the above example, when the page loads a GET request is sent to the /message URL. The HTML in the response will be placed into the inside of the div.

Note that for the demo a delay has been added so you can see the effect. It would normally be instantaneous.

Click Trigger (default for most elements)

An element with the hx-trigger="click" attribute will be triggered when the element is clicked by the user.

In the above example, when the user clicks the element for the first time (the once setting) a GET request is sent to the /message URL. The HTML in the response will then replace the original content of the div...

Mouse Over Trigger

An element with the hx-trigger="mouseenter" attribute will be triggered when the mouse hovers over the element.

In the above example, when the user mouses over the element for the first time (the once setting) a GET request is sent to the /message URL. The HTML in the response will then replace the original content of the div...

Keyboard Triggers

An element with the hx-trigger="keyup" attribute will be triggered when the user types on the kayboard.

In the above example, when the user presses and releases a key, a GET request is sent to the /message URL. The HTML in the response will then replace the original content of the div...

Note the from:window setting... This means that the user doesn't have to be typing into a specific element for the keys to be detected - This allows for hot-key type behaviours.

Revealed Trigger

An element with the hx-trigger="revealed" attribute will be triggered when the element is scrolled into view.

In the above example, when the element scrolls into view, a GET request is sent to the /message URL. The HTML in the response will then replace the original content of the div...

Note that for the demo a delay has been added so you can see the effect. It would normally be instantaneous.

Regular, Timed Triggers

An element with the hx-trigger="every Xs" attribute will be triggered repeatedly, every X seconds.

In the above example, every 3 seconds, a GET request is sent to the /message URL. The HTML in the response will then replace the original content of the div...

Note that for the demo a delay has been added so you can see the effect. It would normally be instantaneous.