itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-29 22:11:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

hx-on: Added to Reference page, and revised docs: readability, wordiness. (#1365)

Browse Source 
* hx-on: Added to Reference page, and revised docs, removed words.

* hx-on: Made first sample a <div> to showcase versatility.

* Minor revision.

* Minor revision.

* Fixed broken Locality of Behavior link.
This commit is contained in:
Nathaniel Sabanski 2023-04-13 11:17:13 -07:00 committed by GitHub
parent 30248b9be6
commit 360331d25a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
www/content/attributes/hx-on.md
View File

@ -2,47 +2,40 @@
title = "hx-on"
+++
## `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](https://developer.mozilla.org/en-US/docs/Web/Events/Event_handlers#using_onevent_properties) found in HTML, such as `onClick`.
The `hx-on` attribute allows you embed JavaScript scripts to respond to events directly on an element. It is
very similar to the [`onevent` properties](https://developer.mozilla.org/en-US/docs/Web/Events/Event_handlers#using_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)](/essays/locality-of-behaviour/). This also enables you to handle any htmx event.
`hx-on` improves on the `onevent` handlers in that it can handle any events, not just a fixed number of specific
DOM events. This allows you to respond to, for example, the many htmx-emitted events in a nice, embedded manner
that gives good [Locality of Behavior (LoB)](/essays/locality-of-behavior).
The `hx-on` attribute's value is an event name, followed by a colon, followed by the event handler code:
The value is an event name, followed by a colon `:`, followed by the script:
```html
<div>
<button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')">
Get Info!
</button>
</div>
<div hx-on="click: alert('Clicked!')">Click</div>
```
Here the event `hmtx:beforeRequest` is captured and shows an alert. Note that it is not possible to respond to this
event using the `onevent` properties in normal HTML.
All htmx events can be captured, too!
```html
<button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')">
Get Info!
</button>
```
### Symbols
Following the conventions of the `onevent` properties, two symbols are available in the body of the event handler code:
Like `onevent`, two symbols are made available to event handler scripts:
* `this` - Set to the element on which the `hx-on` attribute is defined
* `event` - Set to the event that triggered the handler
* `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:
```html
<div>
<button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')
htmx:afterRequest: alert('Done making a request!')">
Get Info!
</button>
</div>
<button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')
htmx:afterRequest: alert('Done making a request!')">
Get Info!
</button>
```
### Notes

1
www/content/reference.md
View File

@ -24,6 +24,7 @@ The following are the most common attributes when using htmx.
| [`hx-boost`](@/attributes/hx-boost.md) | add or remove [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement) for links and forms
| [`hx-get`](@/attributes/hx-get.md) | issues a `GET` to the specified URL
| [`hx-post`](@/attributes/hx-post.md) | issues a `POST` to the specified URL
| [`hx-on`](@/attributes/hx-on.md) | handle any event with a script inline
| [`hx-push-url`](@/attributes/hx-push-url.md) | pushes the URL into the browser location bar, creating a new history entry
| [`hx-select`](@/attributes/hx-select.md) | select content to swap in from a response
| [`hx-select-oob`](@/attributes/hx-select-oob.md) | select content to swap in from a response, out of band (somewhere other than the target)