hx-on

The hx-on attribute allows you to embed scripts inline to respond to events directly on an element; similar to the onevent properties found in HTML, such as onClick.

hx-on improves upon onevent by enabling the handling of any event for enhanced Locality of Behaviour (LoB). This also enables you to handle any htmx event.

The value is an event name, followed by a colon :, followed by the script:

<div hx-on="click: alert('Clicked!')">Click</div>

All htmx events can be captured, too!

<button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')">
    Get Info!
</button>

Symbols

Like onevent, two symbols are made available to event handler scripts:

• this - The element on which the hx-on attribute is defined
• event - The event that triggered the handler

Multiple Handlers

Multiple handlers can be defined by putting them on new lines:

<button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')
                              htmx:afterRequest: alert('Done making a request!')">
    Get Info!
</button>

Notes

• hx-on is not inherited, however due to event bubbling, hx-on attributes on parent elements will typically be triggered by events on child elements