From 7ce53d4ce83acb434db88eed7ed90622a6c44b95 Mon Sep 17 00:00:00 2001
From: Alexander Petros <apetros15@gmail.com>
Date: Tue, 1 Aug 2023 15:28:29 -0400
Subject: [PATCH] Tighten up hx-on docs (#1648)

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.
---
 www/content/attributes/hx-on.md | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/www/content/attributes/hx-on.md b/www/content/attributes/hx-on.md
index af8ffc05..57bc03b3 100644
--- a/www/content/attributes/hx-on.md
+++ b/www/content/attributes/hx-on.md
@@ -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!