itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 07:21:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Tighten up hx-on docs (#1648)

Browse Source 
Make the docs a little bit shorter so that the old form is still
documented without repeating information (and the new form is
emphasized). I also fixed a misplaced double quote in one of the
examples.
This commit is contained in:
Alexander Petros 2023-08-01 15:28:29 -04:00 committed by GitHub
parent 6fddb9b8bb
commit 7ce53d4ce8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,11 +7,10 @@ The `hx-on` attribute allows you to embed scripts inline to respond to events di
`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.
There are two forms of this attribute, one in which you specify the event as part of the attribute name
after a colon (`hx-on:click`, for example), and one that uses the `hx-on` attribute directly. The
latter form should only be used if IE11 support is required.
after a colon (`hx-on:click`, for example), and a deprecated form that uses the `hx-on` attribute directly. The
latter should only be used if IE11 support is required.
### Forms
#### hx-on:* (recommended)
### hx-on:* (recommended)
The event name follows a colon `:` in the attribute, and the attribute value is the script to be executed:
```html
@ -40,22 +39,16 @@ events, and omit the "htmx" part:
Adding multiple handlers is easy, you just specify additional attributes:
```html
<button hx-get="/info"
hx-on::before-request="alert('Making a request!'")
hx-on::before-request="alert('Making a request!')"
hx-on::after-request="alert('Done making a request!')">
Get Info!
</button>
```
#### hx-on (deprecated, except for IE11 support)
### hx-on (deprecated)
The value is an event name, followed by a colon `:`, followed by the script:
```html
<div hx-on="click: alert('Clicked!')">Click</div>
```
And htmx events:
```html
<button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')">
Get Info!