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>
Like onevent
, two symbols are made available to event handler scripts:
this
- The element on which the hx-on
attribute is definedevent
- The event that triggered the handlerMultiple 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>
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