diff --git a/src/htmx.js b/src/htmx.js
index 365f602d7..4e3b79d9e 100644
--- a/src/htmx.js
+++ b/src/htmx.js
@@ -693,151 +693,123 @@ var htmx = (() => {
             this.__onTrigger(elt, specString, initialHandler)
         }
 
-        // Wire up trigger listeners with full modifier support (delay, throttle, once, etc.)
+        // Wire up event listeners with full modifier support (once, prevent, stop,
+        // delay, throttle, changed, capture, passive, from, filter, etc.)
         __onTrigger(elt, specString, handler) {
             let specs = this.__parseTriggerSpecs(specString)
             this.__htmxProp(elt).triggerSpecs.push(...specs)
 
             for (let spec of specs) {
-                spec.handler = handler
                 spec.listeners = []
-                spec.values = new WeakMap()
 
                 let [eventName, filter] = this.__extractFilter(spec.name);
 
-                // should be first so logic is called only when all other filters pass
-                if (spec.once) {
-                    let original = spec.handler
-                    spec.handler = (evt) => {
-                        original(evt)
-                        for (let listenerInfo of spec.listeners) {
-                            listenerInfo.fromElt.removeEventListener(listenerInfo.eventName, listenerInfo.handler)
-                        }
+                // Resolve from: elements (self listens on elt but filters by event.target in guard)
+                let fromElts = [elt];
+                if (spec.from === 'outside') fromElts = [document];
+                else if (spec.from && spec.from !== 'self') fromElts = this.__findAllExt(elt, spec.from);
+
+                // Inner: runs after delay/throttle resolves
+                let inner = (evt) => {
+                    if (spec.halt || spec.prevent) evt.preventDefault();
+                    if (spec.halt || spec.stop || spec.consume) evt.stopPropagation();
+                    if (spec.once) {
+                        for (let info of spec.listeners) info.fromElt.removeEventListener(info.eventName, info.handler, info);
                     }
-                }
-
-                if (eventName === 'intersect' || eventName === "revealed") {
-                    let observerOptions = {}
-                    if (spec.root) observerOptions.root = this.__findOrWarn(elt, spec.root)
-                    if (spec.threshold) observerOptions.threshold = parseFloat(spec.threshold)
-                    let isRevealed = eventName === "revealed"
-                    spec.observer = new IntersectionObserver((entries) => {
-                        for (let i = 0; i < entries.length; i++) {
-                            let entry = entries[i]
-                            if (entry.isIntersecting) {
-                                this.trigger(elt, 'intersect', {}, false)
-                                if (isRevealed) {
-                                    spec.observer.disconnect()
-                                }
-                                break;
-                            }
-                        }
-                    }, observerOptions)
-                    eventName = "intersect"
-                    spec.observer.observe(elt)
-                }
+                    handler(evt);
+                };
 
+                // Wrap inner with delay/throttle if needed
+                let timed = inner;
                 if (spec.delay) {
-                    let original = spec.handler
-                    spec.handler = evt => {
-                        clearTimeout(spec.timeout)
-                        spec.timeout = setTimeout(() => original(evt),
-                            this.parseInterval(spec.delay));
-                    }
-                }
-
-                if (spec.throttle) {
-                    let original = spec.handler
-                    spec.handler = evt => {
+                    timed = evt => {
+                        clearTimeout(spec.timeout);
+                        spec.timeout = setTimeout(() => inner(evt), this.parseInterval(spec.delay));
+                    };
+                } else if (spec.throttle) {
+                    timed = evt => {
                         if (spec.throttled) {
-                            spec.throttledEvent = evt
+                            spec.throttledEvent = evt;
                         } else {
-                            spec.throttled = true
-                            original(evt);
+                            spec.throttled = true;
+                            inner(evt);
                             spec.throttleTimeout = setTimeout(() => {
-                                spec.throttled = false
+                                spec.throttled = false;
                                 if (spec.throttledEvent) {
-                                    // implement trailing-edge throttling
-                                    let throttledEvent = spec.throttledEvent;
-                                    spec.throttledEvent = null
-                                    spec.handler(throttledEvent);
+                                    let e = spec.throttledEvent;
+                                    spec.throttledEvent = null;
+                                    timed(e);
                                 }
-                            }, this.parseInterval(spec.throttle))
+                            }, this.parseInterval(spec.throttle));
                         }
-                    }
+                    };
                 }
 
-                if (spec.target) {
-                    let original = spec.handler
-                    spec.handler = evt => {
-                        if (evt.target?.matches?.(spec.target)) {
-                            original(evt)
+                // Guarded: pre-timing checks that determine if event should proceed
+                spec.handler = (evt) => {
+                    if (spec.from === 'self' && evt.target !== elt) return;
+                    if (spec.from === 'outside' && elt.contains(evt.target)) return;
+                    if (spec.target && !evt.target?.matches?.(spec.target)) return;
+                    if (spec.changed) {
+                        let values = spec.values ??= new WeakMap();
+                        let changed = false;
+                        for (let fromElt of fromElts) {
+                            if (values.get(fromElt) !== fromElt.value) {
+                                changed = true;
+                                values.set(fromElt, fromElt.value);
+                            }
                         }
+                        if (!changed) return;
                     }
+                    if (filter) {
+                        if (this.__shouldCancel(evt)) evt.preventDefault();
+                        let evtArgs = {}; for (let k in evt) evtArgs[k] = evt[k];
+                        if (!this.__executeJavaScript(elt, evtArgs, filter, true, false)) return;
+                    }
+                    timed(evt);
+                };
+
+                // Intersect/revealed: set up observer
+                if (eventName === 'intersect' || eventName === 'revealed') {
+                    let observerOptions = {rootMargin: spec.rootMargin};
+                    if (spec.root) observerOptions.root = this.__findOrWarn(elt, spec.root);
+                    if (spec.threshold) observerOptions.threshold = parseFloat(spec.threshold);
+                    let isRevealed = eventName === 'revealed';
+                    spec.observer = new IntersectionObserver((entries) => {
+                        for (let i = 0; i < entries.length; i++) {
+                            if (entries[i].isIntersecting) {
+                                this.trigger(elt, 'intersect', {}, false);
+                                if (isRevealed) spec.observer.disconnect();
+                                break;
+                            }
+                        }
+                    }, observerOptions);
+                    eventName = 'intersect';
+                    spec.observer.observe(elt);
                 }
 
+                // Every: set up interval
                 if (eventName === "every") {
                     let interval = Object.keys(spec).find(k => k !== 'name');
                     spec.interval = setInterval(() => {
-                        if (elt.isConnected) {
-                            this.__trigger(elt, 'every', {}, false);
-                        } else {
-                            clearInterval(spec.interval)
-                        }
+                        if (elt.isConnected) this.__trigger(elt, 'every', {}, false);
+                        else clearInterval(spec.interval);
                     }, this.parseInterval(interval));
                 }
 
-                if (spec.consume) {
-                    let original = spec.handler
-                    spec.handler = (evt) => {
-                        evt.stopPropagation()
-                        original(evt)
-                    }
-                }
-
-                if (filter) {
-                    let original = spec.handler
-                    spec.handler = (evt) => {
-                        if (this.__shouldCancel(evt)) evt.preventDefault()
-                        let evtArgs = {}; for (let k in evt) evtArgs[k] = evt[k];
-                        if (this.__executeJavaScript(elt, evtArgs, filter, true, false)) {
-                            original(evt)
-                        }
-                    }
-                }
-
-                let fromElts = [elt];
-                if (spec.from) {
-                    fromElts = this.__findAllExt(elt, spec.from)
-                }
-
-                if (spec.changed) {
-                    let original = spec.handler
-                    spec.handler = (evt) => {
-                        let trigger = false
-                        for (let fromElt of fromElts) {
-                            if (spec.values.get(fromElt) !== fromElt.value) {
-                                trigger = true
-                                spec.values.set(fromElt, fromElt.value);
-                            }
-                        }
-                        if (trigger) {
-                            original(evt)
-                        }
-                    }
-                }
-
-                // load: fire handler directly (no listener needed)
+                // Load: fire immediately, no listener needed
                 if (eventName === 'load') {
-                    spec.handler(new CustomEvent('load'))
-                    continue
+                    spec.handler(new CustomEvent('load'));
+                    continue;
                 }
 
+                // Register listeners
                 for (let fromElt of fromElts) {
-                    let listenerInfo = {fromElt, eventName, handler: spec.handler};
-                    elt._htmx.listeners.push(listenerInfo)
-                    spec.listeners.push(listenerInfo)
-                    fromElt.addEventListener(eventName, spec.handler);
+                    let listenerInfo = {fromElt, eventName, handler: spec.handler,
+                        capture: !!spec.capture, passive: !!spec.passive};
+                    elt._htmx.listeners.push(listenerInfo);
+                    spec.listeners.push(listenerInfo);
+                    fromElt.addEventListener(eventName, spec.handler, listenerInfo);
                 }
             }
         }
@@ -976,7 +948,7 @@ var htmx = (() => {
                     spec.observer?.disconnect()
                 }
                 for (let listenerInfo of elt._htmx.listeners || []) {
-                    listenerInfo.fromElt.removeEventListener(listenerInfo.eventName, listenerInfo.handler);
+                    listenerInfo.fromElt.removeEventListener(listenerInfo.eventName, listenerInfo.handler, listenerInfo);
                 }
                 this.__trigger(elt, "htmx:after:cleanup")
             }
@@ -1651,36 +1623,35 @@ var htmx = (() => {
 
         // hx-on:<event> binds to <event> directly
         // hx-on::<event> is shorthand for hx-on:htmx:<event> (htmx events)
-        // Modifiers (dot-separated): .prevent .stop .halt .once .self .outside .capture .passive .cc
         __handleHxOnAttributes(node) {
-            let searchStrings = this.__prefixes("hx-on:").map(p => this.__maybeAdjustMetaCharacter(p));
+            let hxOnNames = this.__prefixes("hx-on");
             let mc = this.config.metaCharacter || ':';
+            let handler = (code) => async (evt) => {
+                try {
+                    await this.__executeJavaScript(node, { event: evt },
+                        `with(event?.detail||{}){${code}}`, false);
+                } catch (e) {
+                    if (typeof e !== 'symbol') this.__trigger(node, 'htmx:error', { error: e });
+                }
+            };
             for (let attr of node.getAttributeNames()) {
-                let searchString = searchStrings.find(s => attr.startsWith(s));
-                if (!searchString) continue;
-                let [evtName, ...mods] = attr.substring(searchString.length).split('.');
-                let has = m => mods.includes(m);
-                if (evtName.startsWith(mc)) evtName = 'htmx' + evtName;
-                if (has('cc')) evtName = evtName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-                let code = node.getAttribute(attr);
-                let target = has('outside') ? document : node;
-                let opts = { capture: has('capture'), passive: has('passive') };
-                let halt = has('halt');
-                let handler = async (evt) => {
-                    if (has('self') && evt.target !== node) return;
-                    if (has('outside') && node.contains(evt.target)) return;
-                    if (halt || has('prevent')) evt.preventDefault();
-                    if (halt || has('stop')) evt.stopPropagation();
-                    if (has('once')) target.removeEventListener(evtName, handler, opts);
-                    try {
-                        await this.__executeJavaScript(node, { event: evt },
-                            `with(event?.detail||{}){${code}}`, false);
-                    } catch (e) {
-                        if (typeof e !== 'symbol') this.__trigger(node, 'htmx:error', { error: e });
+                let prefix = hxOnNames.find(p => attr.startsWith(p));
+                if (!prefix) continue;
+                let rest = attr.substring(prefix.length);
+                let value = node.getAttribute(attr);
+                // hx-on="click once -> doA(); blur -> doB()"
+                if (!rest) {
+                    for (let part of value.split(/;(?=[^;]*->)/)) {
+                        let idx = part.indexOf('->');
+                        if (idx !== -1) this.__onTrigger(node, part.substring(0, idx).trim(), handler(part.substring(idx + 2).trim()));
                     }
-                };
-                target.addEventListener(evtName, handler, opts);
-                this.__htmxProp(node).listeners.push({fromElt: target, eventName: evtName, handler});
+                    continue;
+                }
+                // hx-on:click="code" or hx-on::before:request="code"
+                if (rest[0] !== mc) continue;
+                let eventName = rest.substring(1);
+                if (eventName.startsWith(mc)) eventName = 'htmx' + mc + eventName.substring(1);
+                this.__onTrigger(node, eventName, handler(value));
             }
         }
 
diff --git a/test/tests/attributes/hx-on.js b/test/tests/attributes/hx-on.js
index b72775516..b2674d139 100644
--- a/test/tests/attributes/hx-on.js
+++ b/test/tests/attributes/hx-on.js
@@ -95,15 +95,102 @@ describe('hx-on attribute', function() {
         assert.equal(window.foo, undefined)
     })
 
+    it('event.detail keys are exposed as bare names in handler scope', function() {
+        let btn = createProcessedHTML('<button hx-on:zap="window.foo = path.toUpperCase()">x</button>');
+        btn.dispatchEvent(new CustomEvent('zap', { detail: { path: 'hello' } }));
+        window.foo.should.equal('HELLO');
+        delete window.foo;
+    });
+
+    // --- synthetic events in simple form ---
+
+    it('hx-on:load fires immediately when element is processed', function() {
+        window.foo = false;
+        createProcessedHTML('<div hx-on:load="window.foo = true">x</div>');
+        window.foo.should.equal(true);
+        delete window.foo;
+    });
+
+    it('hx-on:load provides this as the element', function() {
+        let div = createProcessedHTML('<div hx-on:load="window.foo = this">x</div>');
+        window.foo.should.equal(div);
+        delete window.foo;
+    });
+
+    it('hx-on:load fires on children inside a swap response', function() {
+        window.parentLoaded = false;
+        window.childLoaded = false;
+        playground().innerHTML = '<div id="target">old</div>';
+        htmx.process(playground());
+        let target = playground().querySelector('#target');
+        // Simulate what htmx does during a swap: insert new content and process it
+        target.innerHTML = '<div hx-on:load="window.parentLoaded = true"><span hx-on:load="window.childLoaded = true">new</span></div>';
+        htmx.process(target);
+        window.parentLoaded.should.equal(true);
+        window.childLoaded.should.equal(true);
+        delete window.parentLoaded;
+        delete window.childLoaded;
+    });
+
+    it('hx-on:load passes a CustomEvent as event', function() {
+        createProcessedHTML('<div hx-on:load="window.foo = event.type">x</div>');
+        window.foo.should.equal('load');
+        delete window.foo;
+    });
+
 })
 
-describe('hx-on attribute modifiers', function() {
+describe('hx-on="eventSpec -> code" syntax', function() {
 
     beforeEach(() => { setupTest(this.currentTest); });
     afterEach(() => { cleanupTest(); });
 
-    it('.prevent calls preventDefault before body', function() {
-        let form = createProcessedHTML('<form hx-on:submit.prevent="window.foo = event.defaultPrevented"><button type="submit">go</button></form>');
+    // --- basic ---
+
+    it('basic: fires handler on event', function() {
+        let btn = createProcessedHTML('<button hx-on="click -> window.foo = true">x</button>');
+        btn.click();
+        window.foo.should.equal(true);
+        delete window.foo;
+    });
+
+    it('this refers to the element', function() {
+        let btn = createProcessedHTML('<button hx-on="click -> window.foo = this">x</button>');
+        btn.click();
+        window.foo.should.equal(btn);
+        delete window.foo;
+    });
+
+    it('event is available in handler', function() {
+        let btn = createProcessedHTML('<button hx-on="click -> window.foo = event.type">x</button>');
+        btn.click();
+        window.foo.should.equal('click');
+        delete window.foo;
+    });
+
+    it('event.detail keys are exposed as bare names', function() {
+        let btn = createProcessedHTML('<button hx-on="zap -> window.foo = path">x</button>');
+        btn.dispatchEvent(new CustomEvent('zap', { detail: { path: 'hello' } }));
+        window.foo.should.equal('hello');
+        delete window.foo;
+    });
+
+    // --- once ---
+
+    it('once: removes listener after first fire', function() {
+        window.fooCount = 0;
+        let btn = createProcessedHTML('<button hx-on="click once -> window.fooCount++">x</button>');
+        btn.click();
+        btn.click();
+        btn.click();
+        window.fooCount.should.equal(1);
+        delete window.fooCount;
+    });
+
+    // --- prevent ---
+
+    it('prevent: calls preventDefault before handler', function() {
+        let form = createProcessedHTML('<form hx-on="submit prevent -> window.foo = event.defaultPrevented"><button type="submit">go</button></form>');
         let evt = new SubmitEvent('submit', { cancelable: true, bubbles: true });
         form.dispatchEvent(evt);
         evt.defaultPrevented.should.equal(true);
@@ -111,8 +198,10 @@ describe('hx-on attribute modifiers', function() {
         delete window.foo;
     });
 
-    it('.stop calls stopPropagation before body', function() {
-        playground().innerHTML = '<div id="outer"><button hx-on:click.stop="window.foo = \'inner\'">x</button></div>';
+    // --- stop ---
+
+    it('stop: calls stopPropagation before handler', function() {
+        playground().innerHTML = '<div id="outer"><button hx-on="click stop -> window.foo = \'inner\'">x</button></div>';
         htmx.process(playground());
         let outerFired = false;
         playground().querySelector('#outer').addEventListener('click', () => outerFired = true);
@@ -122,8 +211,25 @@ describe('hx-on attribute modifiers', function() {
         delete window.foo;
     });
 
-    it('.halt is shorthand for .prevent.stop', function() {
-        playground().innerHTML = '<div id="outer"><button hx-on:click.halt="window.foo = 1">x</button></div>';
+    // --- halt (shorthand for prevent + stop) ---
+
+    it('halt: preventDefault and stopPropagation', function() {
+        playground().innerHTML = '<div id="outer"><button hx-on="click halt -> window.foo = 1">x</button></div>';
+        htmx.process(playground());
+        let outerFired = false;
+        playground().querySelector('#outer').addEventListener('click', () => outerFired = true);
+        let btn = playground().querySelector('button');
+        let evt = new MouseEvent('click', { cancelable: true, bubbles: true });
+        btn.dispatchEvent(evt);
+        evt.defaultPrevented.should.equal(true);
+        outerFired.should.equal(false);
+        delete window.foo;
+    });
+
+    // --- prevent + stop ---
+
+    it('prevent stop: equivalent to halt', function() {
+        playground().innerHTML = '<div id="outer"><button hx-on="click prevent stop -> window.foo = 1">x</button></div>';
         htmx.process(playground());
         let outerFired = false;
         playground().querySelector('#outer').addEventListener('click', () => outerFired = true);
@@ -135,101 +241,381 @@ describe('hx-on attribute modifiers', function() {
         delete window.foo;
     });
 
-    it('.once removes the listener after first fire', function() {
+    // --- delay ---
+
+    it('delay: debounces handler', async function() {
         window.fooCount = 0;
-        let btn = createProcessedHTML('<button hx-on:click.once="window.fooCount++">x</button>');
+        playground().innerHTML = '<button hx-on="click delay:30ms -> window.fooCount++">x</button>';
+        htmx.process(playground());
+        let btn = playground().querySelector('button');
         btn.click();
         btn.click();
         btn.click();
+        window.fooCount.should.equal(0);
+        await htmx.timeout(60);
+        window.fooCount.should.equal(1);
+        delete window.fooCount;
+    });
+
+    // --- throttle ---
+
+    it('throttle: throttles handler with trailing edge', async function() {
+        window.fooCount = 0;
+        playground().innerHTML = '<button hx-on="click throttle:30ms -> window.fooCount++">x</button>';
+        htmx.process(playground());
+        let btn = playground().querySelector('button');
+        btn.click(); // fires immediately (first)
+        btn.click(); // queued
+        btn.click(); // replaces queued
+        window.fooCount.should.equal(1);
+        await htmx.timeout(60);
+        window.fooCount.should.equal(2); // trailing edge fires
+        delete window.fooCount;
+    });
+
+    // --- changed ---
+
+    it('changed: only fires when value changes', function() {
+        window.fooCount = 0;
+        playground().innerHTML = '<input value="a" hx-on="input changed -> window.fooCount++">';
+        htmx.process(playground());
+        let inp = playground().querySelector('input');
+        // First fire: value is "a", no previous — should fire
+        inp.dispatchEvent(new Event('input', { bubbles: true }));
         window.fooCount.should.equal(1);
+        // Second fire: value still "a" — should NOT fire
+        inp.dispatchEvent(new Event('input', { bubbles: true }));
+        window.fooCount.should.equal(1);
+        // Change value and fire — should fire
+        inp.value = 'b';
+        inp.dispatchEvent(new Event('input', { bubbles: true }));
+        window.fooCount.should.equal(2);
         delete window.fooCount;
     });
 
-    it('.self only fires when event.target is the element', function() {
+    // --- from ---
+
+    it('from:document: listens on document', function() {
+        window.foo = false;
+        let btn = createProcessedHTML('<button hx-on="custom-evt from:document -> window.foo = true">x</button>');
+        document.dispatchEvent(new CustomEvent('custom-evt'));
+        window.foo.should.equal(true);
+        // Clean up document-level listener
+        for (let l of (btn._htmx?.listeners || [])) l.fromElt.removeEventListener(l.eventName, l.handler);
+        delete window.foo;
+    });
+
+    // --- from:self ---
+
+    it('from:self: only fires when event.target is the element', function() {
         window.fooCount = 0;
-        playground().innerHTML = '<div hx-on:click.self="window.fooCount++"><span>child</span></div>';
+        playground().innerHTML = '<div hx-on="click from:self -> window.fooCount++"><span>child</span></div>';
         htmx.process(playground());
         let div = playground().querySelector('div');
-        playground().querySelector('span').click(); // bubbles to div, target=span → skip
+        playground().querySelector('span').click(); // bubbles, target=span → skip
         window.fooCount.should.equal(0);
         div.click(); // target=div → fire
         window.fooCount.should.equal(1);
         delete window.fooCount;
     });
 
-    it('.outside fires only when click happens outside the element', function() {
+    // --- from:outside ---
+
+    it('from:outside: fires only when event is outside the element', function() {
         window.outsideCount = 0;
-        let btn;
-        playground().innerHTML = '<button hx-on:click.outside="window.outsideCount++">x</button><div id="other"></div>';
+        playground().innerHTML = '<button hx-on="click from:outside -> window.outsideCount++">x</button><div id="other"></div>';
         htmx.process(playground());
-        btn = playground().querySelector('button');
+        let btn = playground().querySelector('button');
         btn.click(); // inside → skip
         window.outsideCount.should.equal(0);
         playground().querySelector('#other').click(); // outside → fire
         window.outsideCount.should.equal(1);
-        // Manually remove the document-level listener so it doesn't leak across tests
-        for (let l of btn._htmx.listeners) l.fromElt.removeEventListener(l.eventName, l.handler);
+        // Clean up document-level listener
+        for (let l of (btn._htmx?.listeners || [])) l.fromElt.removeEventListener(l.eventName, l.handler);
         delete window.outsideCount;
     });
 
-    it('.cc camel-cases the event name', function() {
-        window.foo = null;
-        let btn = createProcessedHTML('<button hx-on:my-event.cc="window.foo = event.type">x</button>');
-        btn.dispatchEvent(new CustomEvent('myEvent'));
-        window.foo.should.equal('myEvent');
-        delete window.foo;
+    // --- capture ---
+
+    it('capture: fires during capture phase', function() {
+        let order = [];
+        playground().innerHTML = '<div id="outer"><button hx-on="click capture -> window.captureOrder.push(\'capture\')">x</button></div>';
+        window.captureOrder = order;
+        htmx.process(playground());
+        // Add a bubbling listener on the same button for comparison
+        playground().querySelector('button').addEventListener('click', () => order.push('bubble'));
+        playground().querySelector('button').click();
+        // Capture fires before bubble
+        order[0].should.equal('capture');
+        order[1].should.equal('bubble');
+        delete window.captureOrder;
     });
 
-    it('event.detail keys are exposed as bare names in handler scope', function() {
-        let btn = createProcessedHTML('<button hx-on:zap="window.foo = path.toUpperCase()">x</button>');
-        btn.dispatchEvent(new CustomEvent('zap', { detail: { path: 'hello' } }));
-        window.foo.should.equal('HELLO');
+    // --- passive ---
+
+    it('passive: addEventListener is called with passive option', function() {
+        // passive handlers cannot call preventDefault without a browser warning,
+        // so we just verify the handler fires (option is passed internally)
+        window.foo = false;
+        let btn = createProcessedHTML('<button hx-on="click passive -> window.foo = true">x</button>');
+        btn.click();
+        window.foo.should.equal(true);
         delete window.foo;
     });
 
-    it('multiple modifiers can be chained (.halt.once)', function() {
+    // --- filter ---
+
+    it('[filter]: only fires when filter expression is truthy', function() {
         window.fooCount = 0;
-        let btn = createProcessedHTML('<button hx-on:click.halt.once="window.fooCount++">x</button>');
-        let evt = new MouseEvent('click', { cancelable: true, bubbles: true });
-        btn.dispatchEvent(evt);
-        evt.defaultPrevented.should.equal(true);
-        btn.dispatchEvent(new MouseEvent('click', { cancelable: true, bubbles: true }));
+        let btn = createProcessedHTML('<button hx-on="keydown[key==\'Enter\'] -> window.fooCount++">x</button>');
+        btn.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        window.fooCount.should.equal(0);
+        btn.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
         window.fooCount.should.equal(1);
         delete window.fooCount;
     });
 
-    it('.self.once only counts toward "once" when self condition matches', function() {
-        // A bubbled event from a child should NOT consume the .once budget.
+    // --- combined ---
+
+    it('changed + delay: debounced changed-only handler', async function() {
         window.fooCount = 0;
-        playground().innerHTML = '<div hx-on:click.self.once="window.fooCount++"><span>child</span></div>';
+        playground().innerHTML = '<input value="a" hx-on="input changed delay:30ms -> window.fooCount++">';
+        htmx.process(playground());
+        let inp = playground().querySelector('input');
+        // Rapid changes — should debounce
+        inp.value = 'b';
+        inp.dispatchEvent(new Event('input', { bubbles: true }));
+        inp.value = 'c';
+        inp.dispatchEvent(new Event('input', { bubbles: true }));
+        inp.value = 'd';
+        inp.dispatchEvent(new Event('input', { bubbles: true }));
+        window.fooCount.should.equal(0);
+        await htmx.timeout(60);
+        window.fooCount.should.equal(1);
+        delete window.fooCount;
+    });
+
+    it('once + from:self: only counts toward once when self matches', function() {
+        window.fooCount = 0;
+        playground().innerHTML = '<div hx-on="click once from:self -> window.fooCount++"><span>child</span></div>';
         htmx.process(playground());
         let div = playground().querySelector('div');
         let span = playground().querySelector('span');
-        span.click(); // bubbles, target=span → skipped, listener should remain
-        span.click(); // same, listener still there
+        span.click(); // bubbles, target=span → skipped
+        span.click(); // same
         window.fooCount.should.equal(0);
-        div.click(); // target=div → fires; THIS is the once
+        div.click(); // target=div → fires; this is the once
         window.fooCount.should.equal(1);
         div.click(); // listener now removed
         window.fooCount.should.equal(1);
         delete window.fooCount;
     });
 
-    it('.outside.once only counts toward "once" when outside condition matches', function() {
+    it('once + from:outside: only counts toward once when outside matches', function() {
         window.outsideCount = 0;
-        playground().innerHTML = '<button hx-on:click.outside.once="window.outsideCount++">x</button><div id="other"></div>';
+        playground().innerHTML = '<button hx-on="click once from:outside -> window.outsideCount++">x</button><div id="other"></div>';
         htmx.process(playground());
         let btn = playground().querySelector('button');
         let other = playground().querySelector('#other');
-        btn.click(); // inside → skipped, listener should remain
+        btn.click(); // inside → skipped
         btn.click(); // same
         window.outsideCount.should.equal(0);
         other.click(); // outside → fires; consumes once
         window.outsideCount.should.equal(1);
         other.click(); // listener now removed
         window.outsideCount.should.equal(1);
-        // Clean up document-level listener if any remain
         for (let l of (btn._htmx?.listeners || [])) l.fromElt.removeEventListener(l.eventName, l.handler);
         delete window.outsideCount;
     });
-})
\ No newline at end of file
+
+    // --- multiple events ---
+
+    it('multiple events: separated by semicolons', function() {
+        window.focusFired = false;
+        window.blurFired = false;
+        playground().innerHTML = '<input hx-on="focus -> window.focusFired = true; blur -> window.blurFired = true">';
+        htmx.process(playground());
+        let inp = playground().querySelector('input');
+        inp.dispatchEvent(new Event('focus'));
+        window.focusFired.should.equal(true);
+        inp.dispatchEvent(new Event('blur'));
+        window.blurFired.should.equal(true);
+        delete window.focusFired;
+        delete window.blurFired;
+    });
+
+    // --- multi-statement JS ---
+
+    it('multi-statement JS works with braces', function() {
+        window.foo = 0;
+        let btn = createProcessedHTML('<button hx-on="click -> { window.foo++; window.foo++ }">x</button>');
+        btn.click();
+        window.foo.should.equal(2);
+        delete window.foo;
+    });
+
+    it('semicolons inside nested braces are preserved', function() {
+        window.foo = 0;
+        let btn = createProcessedHTML('<button hx-on="click -> { if (true) { window.foo++; window.foo++ } }">x</button>');
+        btn.click();
+        window.foo.should.equal(2);
+        delete window.foo;
+    });
+
+    it('semicolons inside parens are preserved', function() {
+        window.foo = 0;
+        let btn = createProcessedHTML('<button hx-on="click -> (window.foo++, window.foo++)">x</button>');
+        btn.click();
+        window.foo.should.equal(2);
+        delete window.foo;
+    });
+
+    // --- comma: multiple events, same code ---
+
+    it('comma: multiple events fire the same handler', function() {
+        window.fooCount = 0;
+        let btn = createProcessedHTML('<button hx-on="click, customevt -> window.fooCount++">x</button>');
+        btn.click();
+        btn.dispatchEvent(new CustomEvent('customevt'));
+        window.fooCount.should.equal(2);
+        delete window.fooCount;
+    });
+
+    // --- arrow functions in JS code ---
+
+    it('arrow functions in JS code do not break parsing', function() {
+        let btn = createProcessedHTML('<button hx-on="click -> window.foo = [1,2,3].filter(x => x > 1)">x</button>');
+        btn.click();
+        window.foo.should.deep.equal([2, 3]);
+        delete window.foo;
+    });
+
+    // --- multiple events + multi-statement combined ---
+
+    it('multi-statement and multi-event combined', function() {
+        window.clickCount = 0;
+        window.blurFired = false;
+        playground().innerHTML = '<button hx-on="click -> { window.clickCount++; window.clickCount++ }; blur -> window.blurFired = true">x</button>';
+        htmx.process(playground());
+        let btn = playground().querySelector('button');
+        btn.click();
+        window.clickCount.should.equal(2);
+        btn.dispatchEvent(new Event('blur'));
+        window.blurFired.should.equal(true);
+        delete window.clickCount;
+        delete window.blurFired;
+    });
+
+    // --- from with CSS selector ---
+
+    it('from:.selector: listens on matching elements', function() {
+        window.foo = false;
+        playground().innerHTML = '<div id="source"></div><button hx-on="customevt from:#source -> window.foo = true">x</button>';
+        htmx.process(playground());
+        playground().querySelector('#source').dispatchEvent(new CustomEvent('customevt'));
+        window.foo.should.equal(true);
+        delete window.foo;
+    });
+
+    // --- hx-on: and hx-on= coexist ---
+
+    it('hx-on: and hx-on= coexist on the same element', function() {
+        window.colonFired = false;
+        window.arrowFired = false;
+        let btn = createProcessedHTML('<button hx-on:click="window.colonFired = true" hx-on="customevt -> window.arrowFired = true">x</button>');
+        btn.click();
+        window.colonFired.should.equal(true);
+        btn.dispatchEvent(new CustomEvent('customevt'));
+        window.arrowFired.should.equal(true);
+        delete window.colonFired;
+        delete window.arrowFired;
+    });
+
+    // --- synthetic events ---
+
+    it('load: fires immediately when element is processed', function() {
+        window.foo = false;
+        createProcessedHTML('<div hx-on="load -> window.foo = true">x</div>');
+        window.foo.should.equal(true);
+        delete window.foo;
+    });
+
+    it('load: works with modifiers', function() {
+        window.foo = false;
+        createProcessedHTML('<div hx-on="load once -> window.foo = true">x</div>');
+        window.foo.should.equal(true);
+        delete window.foo;
+    });
+
+    it('load: provides this and event', function() {
+        let div = createProcessedHTML('<div hx-on="load -> { window.fooThis = this; window.fooType = event.type }">x</div>');
+        window.fooThis.should.equal(div);
+        window.fooType.should.equal('load');
+        delete window.fooThis;
+        delete window.fooType;
+    });
+
+    it('every: fires repeatedly on interval', async function() {
+        window.fooCount = 0;
+        playground().innerHTML = '<div hx-on="every 50ms -> window.fooCount++">x</div>';
+        htmx.process(playground());
+        window.fooCount.should.equal(0);
+        await htmx.timeout(130);
+        window.fooCount.should.be.at.least(2);
+        // Clean up: remove element so interval stops (checks elt.isConnected)
+        playground().innerHTML = '';
+        delete window.fooCount;
+    });
+
+    // --- doc examples: synthetic events ---
+
+    it('load: focuses first input when element is processed', function() {
+        let div = createProcessedHTML('<div hx-on:load="this.querySelector(\'input\')?.focus()"><input id="myinput"></div>');
+        document.activeElement.id.should.equal('myinput');
+    });
+
+    it('revealed: adds class when element intersects', function() {
+        let originalIO = window.IntersectionObserver;
+        let observerCallback;
+        window.IntersectionObserver = function(cb, opts) {
+            observerCallback = cb;
+            return { observe: function() {}, disconnect: function() {} };
+        };
+        let div = createProcessedHTML('<div hx-on="revealed -> this.classList.add(\'visible\')">x</div>');
+        div.classList.contains('visible').should.equal(false);
+        observerCallback([{ isIntersecting: true }]);
+        div.classList.contains('visible').should.equal(true);
+        window.IntersectionObserver = originalIO;
+    });
+
+    it('intersect once: adds class when element becomes visible', function() {
+        let originalIO = window.IntersectionObserver;
+        let observerCallback, disconnected = false;
+        window.IntersectionObserver = function(cb, opts) {
+            observerCallback = cb;
+            return { observe: function() {}, disconnect: function() { disconnected = true; } };
+        };
+        let div = createProcessedHTML('<div hx-on="intersect once -> this.classList.add(\'in-view\')">x</div>');
+        div.classList.contains('in-view').should.equal(false);
+        observerCallback([{ isIntersecting: true }]);
+        div.classList.contains('in-view').should.equal(true);
+        window.IntersectionObserver = originalIO;
+    });
+
+    it('every: updates text content on interval', async function() {
+        let div = createProcessedHTML('<div hx-on="every 50ms -> this.textContent = \'updated\'">original</div>');
+        div.textContent.should.equal('original');
+        await htmx.timeout(80);
+        div.textContent.should.equal('updated');
+        playground().innerHTML = '';
+    });
+
+    // --- backward compat ---
+
+    it('hx-on:click still works (backward compat)', function() {
+        let btn = createProcessedHTML('<button hx-on:click="window.foo = true">x</button>');
+        btn.click();
+        window.foo.should.equal(true);
+        delete window.foo;
+    });
+})
diff --git a/test/tests/ext/hx-live.js b/test/tests/ext/hx-live.js
index c9b631f98..c01067c62 100644
--- a/test/tests/ext/hx-live.js
+++ b/test/tests/ext/hx-live.js
@@ -783,4 +783,82 @@ describe('hx-live extension', function () {
         window.foo.should.equal('tgt');
         delete window.foo;
     });
+
+    // -------------------------------------------------------------------------
+    // hx-live helpers inside hx-on="event -> code" syntax
+    // -------------------------------------------------------------------------
+
+    it('q() works inside hx-on="event -> code"', function() {
+        playground().innerHTML = '<button hx-on="click -> window.foo = q(\'next #target\').textContent">x</button><div id="target">tgt</div>';
+        htmx.process(playground());
+        playground().querySelector('button').click();
+        window.foo.should.equal('tgt');
+        delete window.foo;
+    });
+
+    it('take() works inside hx-on="event -> code"', function() {
+        playground().innerHTML = `
+            <div class="tabs">
+                <button class="tab selected">a</button>
+                <button class="tab">b</button>
+                <button class="tab" hx-on="click -> take('selected', '.tab')">c</button>
+            </div>
+        `;
+        htmx.process(playground());
+        let tabs = playground().querySelectorAll('.tab');
+        tabs[2].click();
+        tabs[0].classList.contains('selected').should.equal(false);
+        tabs[1].classList.contains('selected').should.equal(false);
+        tabs[2].classList.contains('selected').should.equal(true);
+    });
+
+    it('toggle() works inside hx-on="event -> code"', function() {
+        playground().innerHTML = '<button hx-on="click -> toggle(\'.active\', \'@aria-pressed=true|false\')">x</button>';
+        htmx.process(playground());
+        let btn = playground().querySelector('button');
+        btn.click();
+        btn.classList.contains('active').should.equal(true);
+        btn.getAttribute('aria-pressed').should.equal('true');
+        btn.click();
+        btn.classList.contains('active').should.equal(false);
+        btn.getAttribute('aria-pressed').should.equal('false');
+    });
+
+    it('debounce() works inside hx-on="event -> code"', async function() {
+        window.__dbCount = 0;
+        playground().innerHTML = '<button hx-on="click -> debounce(30, () => { window.__dbCount++ })">x</button>';
+        htmx.process(playground());
+        let btn = playground().querySelector('button');
+        btn.click();
+        btn.click();
+        btn.click();
+        await htmx.timeout(60);
+        window.__dbCount.should.equal(1);
+        delete window.__dbCount;
+    });
+
+    it('trigger() works inside hx-on="event -> code"', function() {
+        let fired = null;
+        playground().innerHTML = '<button hx-on="click -> trigger(\'zap\', { x: 1 })">x</button>';
+        htmx.process(playground());
+        let btn = playground().querySelector('button');
+        btn.addEventListener('zap', e => fired = e);
+        btn.click();
+        assert.isNotNull(fired);
+        fired.detail.x.should.equal(1);
+    });
+
+    it('hx-live helpers work with hx-on modifiers', async function() {
+        window.__dbCount = 0;
+        playground().innerHTML = '<input hx-on="input changed delay:30ms -> debounce(20, () => { window.__dbCount++ })">';
+        htmx.process(playground());
+        let inp = playground().querySelector('input');
+        inp.value = 'a';
+        inp.dispatchEvent(new Event('input', { bubbles: true }));
+        inp.value = 'b';
+        inp.dispatchEvent(new Event('input', { bubbles: true }));
+        await htmx.timeout(80);
+        window.__dbCount.should.equal(1);
+        delete window.__dbCount;
+    });
 });
diff --git a/www/src/content/docs/01-get-started/02-migration.md b/www/src/content/docs/01-get-started/02-migration.md
index 4b0b07efd..add386a99 100644
--- a/www/src/content/docs/01-get-started/02-migration.md
+++ b/www/src/content/docs/01-get-started/02-migration.md
@@ -129,6 +129,19 @@ In htmx 4, the main content swaps first. OOB and [`<hx-partial>`](/docs/core-con
 This matters if an OOB swap creates or modifies DOM that the main swap depends on. If your app relies on that ordering,
 restructure so each swap is independent.
 
+### `hx-trigger` `queue` modifier removed
+
+The `queue` modifier on [`hx-trigger`](/reference/attributes/hx-trigger) (e.g. `hx-trigger="click queue:all"`) no longer
+works. Request queuing is now controlled exclusively by [`hx-sync`](/reference/attributes/hx-sync).
+
+```html
+<!-- htmx 2 -->
+<div hx-trigger="click queue:all" hx-get="/test">...</div>
+
+<!-- htmx 4: use hx-sync instead -->
+<div hx-trigger="click" hx-get="/test" hx-sync="this:queue all">...</div>
+```
+
 ### 60-second timeout
 
 htmx 2 had no timeout (`0`). htmx 4 sets [`defaultTimeout`](/reference/config/htmx-config-defaultTimeout) to `60000`.
diff --git a/www/src/content/docs/02-core-concepts/04-client-scripting.md b/www/src/content/docs/02-core-concepts/04-client-scripting.md
index c576a5e64..8bc953070 100644
--- a/www/src/content/docs/02-core-concepts/04-client-scripting.md
+++ b/www/src/content/docs/02-core-concepts/04-client-scripting.md
@@ -184,3 +184,9 @@ htmx.onLoad((content) => {
 ```
 
 This will ensure that as new content is added to the DOM by htmx, sortable elements are properly initialized.
+
+## See Also
+
+- [`hx-on`](/reference/attributes/hx-on) (attribute)
+- [Hypermedia-Friendly Scripting](/essays/hypermedia-friendly-scripting) (essay)
+- [Locality of Behaviour](/essays/locality-of-behaviour) (essay)
diff --git a/www/src/content/reference/01-attributes/06-hx-trigger.md b/www/src/content/reference/01-attributes/06-hx-trigger.md
index ff8631760..70ff8d574 100644
--- a/www/src/content/reference/01-attributes/06-hx-trigger.md
+++ b/www/src/content/reference/01-attributes/06-hx-trigger.md
@@ -3,263 +3,232 @@ title: "hx-trigger"
 description: "Controls when the element issues a request"
 ---
 
-The `hx-trigger` attribute specifies what triggers an AJAX request.
+The `hx-trigger` attribute controls which event(s) trigger an element's AJAX request (set via [`hx-get`](/reference/attributes/hx-get), [`hx-post`](/reference/attributes/hx-post), etc.).
 
-## Examples
+Defaults to:
+- [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) → `<input>` / `<textarea>` / `<select>`
+- [`submit`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event) → `<form>`
+- [`click`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) → `<input type=button>`, `<input type=submit>`, and everything else
 
-```html
-<!-- Trigger on click -->
-<div hx-trigger="click" hx-get="...">Click Me</div>
-
-<!-- Search with debounce -->
-<input hx-trigger="input changed delay:1s" hx-get="...">
-
-<!-- Lazy load on scroll -->
-<div hx-trigger="revealed" hx-get="...">Loading...</div>
-
-<!-- Poll every 2 seconds -->
-<div hx-trigger="every 2s" hx-get="...">Waiting...</div>
-```
-
-A trigger value can be:
+## Syntax
 
-* A [standard event](#standard-events): `click`, `input`, `keyup`
-* A [synthetic event](#synthetic-events): `load`, `revealed`, `intersect`
-* A [polling](#polling) expression: `every 1s`
-* [Multiple triggers](#multiple-triggers) (comma-separated)
+```html
+<!-- hx-trigger="<event>[<filter>] <modifiers> [, ...]" -->
 
-Events can be refined with [filters](#event-filters) and [modifiers](#event-modifiers) (e.g. `input changed delay:1s`).
+<!-- Basic (click is the default) -->
+<button hx-get="...">
 
-## Defaults
+<!-- With from: modifier — listen on a different element -->
+<button hx-trigger="click from:outside" hx-get="...">
 
-When `hx-trigger` is omitted, htmx uses a sensible default based on the element:
+<!-- With a filter -->
+<button hx-trigger="click[shiftKey]" hx-get="...">
 
-| Element | Default trigger |
-|---|---|
-| `<input>`, `<textarea>`, `<select>` | `change` |
-| `<form>` | `submit` |
-| Everything else | `click` |
+<!-- Multiple triggers -->
+<button hx-trigger="click, keyup[key=='Enter']" hx-get="...">
+```
 
 ## Standard Events
 
-`hx-trigger` accepts any [DOM event](https://developer.mozilla.org/en-US/docs/Web/API/Element#events): [`click`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event), [`input`](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event), [`keyup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event), [`submit`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event), etc.
+`hx-trigger` accepts any DOM event: `click`, `input`, `keyup`, `submit`, etc.
 
 ```html
-<button hx-trigger="click" hx-post="...">Submit</button>
+<button hx-trigger="click" hx-post="...">
 <input hx-trigger="input" hx-get="...">
 <form hx-trigger="submit" hx-post="...">
 <div hx-trigger="mouseenter" hx-get="...">
 ```
 
-[Custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) work too. You can trigger them from JavaScript or from the server via the [`HX-Trigger`](/reference/headers/HX-Trigger) response header.
-
-```html
-<div hx-trigger="my-custom-event" hx-get="...">...</div>
-```
-
-## Event Modifiers
+## Custom Events
 
-### `[filter]`
+Custom events work too. Dispatch them from JavaScript with [`htmx.trigger()`](/reference/methods/htmx-trigger), or from the server via the [`HX-Trigger`](/reference/headers/HX-Trigger) response header.
 
-Only fires when the `[expression]` after the event name is `true`.
+Events from `HX-Trigger` are dispatched on the `body`, so use [`from:body`](#from) to listen for them:
 
 ```html
-<input hx-trigger="keyup[key == 'Enter']" hx-get="/search">
+<div hx-trigger="productsUpdated from:body" hx-get="...">...</div>
 ```
 
-Inside the brackets, all properties of the event are available as bare names:
-
-- [`click`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#instance_properties) → `altKey`, `ctrlKey`, `shiftKey`, `metaKey`, ...
-- [`keydown`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#instance_properties) → `key`, `code`, `repeat`, ...
+## Synthetic Events
 
-Global functions work too: `click[hasUnsavedChanges()]`.
+htmx provides synthetic events beyond standard DOM events:
 
-### `once`
+### `load`
 
-Fires once, then stops listening.
+Fires when the element is loaded into the DOM. Useful for [lazy-loading](/patterns/loading/lazy-load) content.
 
 ```html
-<button hx-trigger="click once" hx-get="...">Load Once</button>
+<div hx-trigger="load" hx-get="...">Loading...</div>
 ```
 
-### `changed`
+### `revealed`
 
-Only fires if the element's `value` changed since last time.
+Fires when the element is scrolled into the viewport. Useful for [infinite scroll](/patterns/loading/infinite-scroll).
 
 ```html
-<input hx-trigger="input changed" hx-get="...">
+<div hx-trigger="revealed" hx-get="...">Loading...</div>
 ```
 
-Note: [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) is a DOM event. `changed` is an htmx modifier. Different things.
+_Note: `revealed` always observes the browser viewport. For scrollable containers with `overflow`, use [`intersect`](#intersect) with `root` instead._
 
-### `delay`
+### `intersect`
 
-Waits before firing. If the event fires again, the delay resets (debounce).
+Fires when an element becomes visible in the viewport. 
+
+Uses the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options) and supports [`root`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root), [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin), and [`threshold`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds) as modifiers.
 
 ```html
-<input hx-trigger="input delay:1s" hx-get="...">
+<div hx-trigger="intersect once" hx-get="...">...</div>
+<div hx-trigger="intersect root:#scroll-container" hx-get="...">...</div>
+<div hx-trigger="intersect rootMargin:100px" hx-get="...">...</div>
+<div hx-trigger="intersect threshold:0.5" hx-get="...">...</div>
 ```
 
-### `throttle`
+### `every <time>`
 
-Fires, then ignores further events for the given interval.
+Fires repeatedly on an interval.
 
 ```html
-<div hx-trigger="scroll throttle:500ms" hx-get="...">...</div>
+<div hx-trigger="every 1s" hx-get="/updates">...</div>
 ```
 
-### `from`
-
-Listens on a different element. Takes a CSS selector or an [extended selector](/docs/features/extended-selectors).
+To add a filter to polling, add it after the interval:
 
 ```html
-<div hx-trigger="keyup[key=='Enter'] from:body" hx-get="...">...</div>
-<div hx-trigger="my-event from:document" hx-get="...">...</div>
-<div hx-trigger="submit from:closest form" hx-get="...">...</div>
+<div hx-trigger="every 1s [someConditional]" hx-get="/updates">...</div>
 ```
 
-### `target`
+## Event Modifiers
 
-Only fires if `event.target` matches the given CSS selector.
+### `[filter]`
+
+A JavaScript expression in brackets after the event name. Only fires when it evaluates to `true`.
 
 ```html
-<div hx-trigger="click target:.child-button" hx-get="...">...</div>
+<input hx-trigger="keyup[key == 'Enter']" hx-get="/search">
 ```
 
-### `consume`
+Inside the brackets, all properties of the event are available as bare names:
 
-Calls `event.stopPropagation()` *and* stops other listeners on the same element.
+- [`click`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#instance_properties) → `altKey`, `ctrlKey`, `shiftKey`, `metaKey`, ...
+- [`keydown`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#instance_properties) → `key`, `code`, `repeat`, ...
 
-```html
-<button hx-trigger="click consume" hx-get="...">...</button>
-```
+Global functions work too: `click[hasUnsavedChanges()]`.
 
-### `queue`
+### `once`
 
-Queues events while a request is already in flight.
+Fires once, then stops listening.
 
 ```html
-<div hx-trigger="click queue:all" hx-get="...">...</div>
+<button hx-trigger="click once" hx-get="...">Load Once</button>
 ```
 
-Options:
-
-* `first` - queue the first event
-* `last` - queue the last event (default)
-* `all` - queue all events (issue a request for each)
-* `none` - do not queue new events
-
-### Example
+### `changed`
 
-A search box that searches on `input`, but only if the value has [`changed`](#changed) and the user hasn't typed anything new for 1 second ([`delay`](#delay)):
+Only fires if the element's `value` changed since last time.
 
 ```html
-<input name="q"
-       hx-trigger="input changed delay:1s"
-       hx-get="/search"
-       hx-target="#search-results"/>
+<input hx-trigger="input changed" hx-get="...">
 ```
 
-## Synthetic Events
-
-htmx provides some synthetic events beyond the standard web API events:
+Note: [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) is a DOM event. `changed` is an htmx modifier. Different things.
 
-### `load`
+### `delay:<time>`
 
-Fires when the element is loaded into the DOM. Useful for [lazy-loading](/patterns/loading/lazy-load) content.
+Waits before firing. If the event fires again, the delay resets (debounce).
 
 ```html
-<div hx-trigger="load" hx-get="...">Loading...</div>
+<input hx-trigger="input delay:1s" hx-get="...">
 ```
 
-### `revealed`
+### `throttle:<time>`
 
-Fires when the element is scrolled into the viewport. Also useful for lazy-loading.
+Fires, then ignores further events for the given interval.
 
 ```html
-<div hx-trigger="revealed" hx-get="...">Loading...</div>
+<div hx-trigger="scroll throttle:500ms" hx-get="...">...</div>
 ```
 
-If you are using `overflow` in CSS (e.g. `overflow-y: scroll`), use [`intersect`](#intersect) [`once`](#once) instead.
+### `from:<selector>`
 
-### `intersect`
-
-Fires once when an element first intersects the viewport.
+Listens on a different element. Takes a CSS selector or an [extended selector](/docs/features/extended-selectors). Two special values: `self` (only the element itself, not children) and `outside` (anything outside the element).
 
 ```html
-<tr hx-trigger="intersect once"
-    hx-get="..."
-    hx-swap="outerHTML">
-  <td>Loading more...</td>
-</tr>
+<div hx-trigger="keyup[key=='Enter'] from:body" hx-get="...">...</div>
+<div hx-trigger="my-event from:document" hx-get="...">...</div>
+<div hx-trigger="submit from:closest form" hx-get="...">...</div>
+<div hx-trigger="click from:self" hx-get="...">...</div>
+<div hx-trigger="click from:outside" hx-get="...">...</div>
 ```
 
-#### `root`
+### `target:<selector>`
 
-A CSS selector of the root element for intersection.
+Only fires if `event.target` matches the given CSS selector.
 
 ```html
-<div hx-trigger="intersect root:#scroll-container" hx-get="...">...</div>
+<div hx-trigger="click target:.child-button" hx-get="...">...</div>
 ```
 
-#### `threshold`
+### `prevent`
 
-A float between 0.0 and 1.0 indicating what amount of intersection to fire the event on.
+Calls `event.preventDefault()`.
 
 ```html
-<div hx-trigger="intersect threshold:0.5" hx-get="...">...</div>
+<form hx-trigger="submit prevent" hx-post="...">...</form>
 ```
 
-## HX-Trigger Header
+### `stop` / `consume`
 
-To fire an event from the `HX-Trigger` response header, you will likely want to use the [`from:body`](#from) modifier. For example, if you send `HX-Trigger: my-custom-event` with a response:
+Calls `event.stopPropagation()`.
 
 ```html
-<div hx-trigger="my-custom-event from:body" hx-get="...">
-  Triggered by HX-Trigger header...
-</div>
+<button hx-trigger="click stop" hx-get="...">...</button>
 ```
 
-This is because the header triggers the event in a different DOM hierarchy than the element you want to trigger. For a similar reason, you will often listen for hot keys [`from`](#from) the body.
-
-## Polling
+### `halt`
 
-Using `every <timing declaration>` you can have an element poll periodically:
+Shorthand for `prevent stop`.
 
 ```html
-<div hx-trigger="every 1s" hx-get="/updates">
-  Nothing Yet!
-</div>
+<a hx-trigger="click halt" hx-get="...">...</a>
 ```
 
-To add a filter to polling, add it after the poll declaration:
+### `capture`
+
+Listens during the capture phase (top-down) instead of the bubble phase (bottom-up).
 
 ```html
-<div hx-trigger="every 1s [someConditional]" hx-get="/updates">
-  Nothing Yet!
-</div>
+<div hx-trigger="click capture" hx-get="...">...</div>
 ```
 
-## Multiple Triggers
+### `passive`
 
-Multiple triggers can be provided, separated by commas. Each trigger gets its own options.
+Tells the browser the handler won't call `preventDefault()`, so the browser can scroll without waiting for your code to finish.
 
 ```html
-<div hx-trigger="load, click delay:1s" hx-get="/news"></div>
+<div hx-trigger="scroll passive" hx-get="...">...</div>
 ```
 
-This loads `/news` immediately on page load, and then again with a 1 second delay after each click.
+### Example
 
-## Via JavaScript
+A search box that searches on `input`, but only if the value has [`changed`](#changed) and the user hasn't typed anything new for 1 second ([`delay`](#delay)):
 
-The AJAX request can be triggered via JavaScript using [`htmx.trigger()`](/reference/methods/htmx-trigger).
+```html
+<input name="q"
+       hx-trigger="input changed delay:1s"
+       hx-get="/search"
+       hx-target="#search-results"/>
+```
 
 ## Notes
 
-* `hx-trigger` can be used without an AJAX request, in which case it will only fire the `htmx:trigger` event.
-* To pass a CSS selector that contains whitespace (e.g. `form input`) to the [`from`](#from) or [`target`](#target) modifier, surround the selector in parentheses or curly brackets (e.g. `from:(form input)` or `from:closest (form input)`).
-* A `reset` event in `hx-trigger` (e.g. `hx-trigger="change, reset"`) might not work as intended, since htmx builds its values and sends a request before the browser resets the form. As a workaround, add a delay: `hx-trigger="change, reset delay:0.01s"`.
+* Selectors with whitespace in [`from`](#from) or [`target`](#target) need parentheses: `from:(form input)`.
+* `hx-trigger="change, reset"` may fire before the browser resets the form. As a workaround, add a short delay: `hx-trigger="change, reset delay:0.01s"`.
 
 ## See Also
 
-- [`hx-on`](/reference/attributes/hx-on) — run inline JavaScript when an event fires, using the same event modifiers, filters, and synthetic events
+- [`hx-on`](/reference/attributes/hx-on) (attribute)
+- [Extended Selectors](/docs/features/extended-selectors) (reference)
+- [Lazy Load](/patterns/loading/lazy-load) (pattern)
+- [Infinite Scroll](/patterns/loading/infinite-scroll) (pattern)
+- [Progress Bar](/patterns/loading/progress-bar) (pattern)
diff --git a/www/src/content/reference/01-attributes/10-hx-on.md b/www/src/content/reference/01-attributes/10-hx-on.md
index 19f373215..c3ef3e1ef 100644
--- a/www/src/content/reference/01-attributes/10-hx-on.md
+++ b/www/src/content/reference/01-attributes/10-hx-on.md
@@ -3,89 +3,268 @@ title: "hx-on"
 description: "Runs inline JavaScript when an event fires"
 ---
 
-The `hx-on*` attributes allow 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 wires inline JavaScript to run when an event fires. 
 
-The `hx-on*` attributes improve upon `onevent` by enabling the handling of any arbitrary JavaScript event,
-for enhanced [Locality of Behaviour (LoB)](/essays/locality-of-behaviour) even when dealing with non-standard DOM
-events. For example, these
-attributes allow you to handle [htmx events](/reference#events).
+It is an enhanced version of [`onevent` properties](https://developer.mozilla.org/en-US/docs/Web/Events/Event_handlers#using_onevent_properties) that keeps behavior in the markup ([Locality of Behaviour](/essays/locality-of-behaviour)).
 
 ## Syntax
 
+**Simple form**
+
+One event, one expression:
+
+```html
+<!-- hx-on:<event>=<js> -->
+
+<dialog hx-on:load="this.showModal()">
+```
+
+For htmx events, use `::` as shorthand for `htmx:`:
+
+```html
+<!-- hx-on::before:request is shorthand for hx-on:htmx:before:request -->
+<button hx-get="/api" hx-on::before:request="showSpinner()">
+<button hx-get="/api" hx-on::after:request="hideSpinner()">
+```
+
+**Extended form**
+
+Builds on [`hx-trigger`](/reference/attributes/hx-trigger)'s grammar, adding `->` to wire events to JavaScript:
+
+```html
+<!-- hx-on="<event>[<filter>] <modifiers> [, ...] -> <js> | { <js>; ... } [; ...]" -->
+
+<!-- Open dialog on page load / swap -->
+<dialog hx-on="load -> this.showModal()">
+
+<!-- Unfocus input on Escape -->
+<input hx-on="keydown[key=='Escape'] -> this.blur()">
+    
+<!-- Close dialog on custom event (e.g. HX-Trigger: closeDialog) -->
+<dialog hx-on="closeDialog from:body -> this.close()">
+    
+<!-- Close on backdrop click OR custom event -->
+<dialog hx-on="click from:self, closeDialog from:body -> this.close()">
+
+<!-- Run multiple statements -->
+<dialog hx-on="close -> this.remove(); log('dialog removed')">
+        
+<!-- Different code for different events -->
+<dialog hx-on="load -> this.showModal();
+               click from:self, closeDialog from:body -> this.close();
+               close -> this.remove(); log('removed')">
+```
+
+- `->` event(s) on the left, JavaScript code on the right
+- `,` multiple events, same code
+- `;` separate event -> code pairs (only splits on the `;` immediately before a `->`, so semicolons in your JS are safe)
+
+## Standard Events
+
+`hx-on` works with any DOM event: `click`, `input`, `keyup`, `submit`, etc.
+
+```html
+<button hx-on:click="...">
+<input hx-on:input="...">
+<form hx-on:submit="...">
+<div hx-on:mouseenter="...">
+```
+
+## Custom Events
+
+Custom events work too. Dispatch them from JavaScript with [`htmx.trigger()`](/reference/methods/htmx-trigger), or from the server via the [`HX-Trigger`](/reference/headers/HX-Trigger) response header.
+
+Events from `HX-Trigger` are dispatched on the `body`, so use [`from:body`](#from) to listen for them:
+
+```html
+<div hx-on="productsUpdated from:body -> log('Products updated!')">
+```
+
+## Synthetic Events
+
+htmx provides synthetic events beyond standard DOM events.
+
+These work with both the simple form (`hx-on:load`) and the extended form (`hx-on="load -> ..."`).
+
+### `load`
+
+Fires when the element is loaded into the DOM.
+
+```html
+<div hx-on:load="this.classList.add('loaded')">
+```
+
+### `revealed`
+
+Fires when the element is scrolled into the viewport.
+
+```html
+<div hx-on:revealed="this.classList.add('visible')">
+```
+
+_Note: `revealed` always observes the browser viewport. For scrollable containers with `overflow`, use [`intersect`](#intersect) with `root` instead._
+
+### `intersect`
+
+Fires when an element becomes visible in the viewport.
+
+Uses the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options) and supports [`root`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root), [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin), and [`threshold`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds) as modifiers.
+
+```html
+<div hx-on="intersect once -> this.classList.add('in-view')">
+<div hx-on="intersect rootMargin:100px -> this.classList.add('near')">
+```
+
+### `every <time>`
+
+Fires repeatedly on an interval. Only available in the extended form.
+
 ```html
-<div hx-on:click="alert('Clicked!')">Click</div>
+<div hx-on="every 1s -> this.textContent = new Date().toLocaleTimeString()">
 ```
 
-With `hx-on` attributes, you specify the event name as part of the attribute name, after a colon. So, for example, if
-you want to respond to a `click` event, you would use the attribute `hx-on:click`:
+## Event Modifiers
+
+### `[filter]`
+
+A JavaScript expression in brackets after the event name. Only fires when it evaluates to `true`.
+
+```html
+<button hx-on="click[ctrlKey] -> navigator.clipboard.writeText(this.textContent)">
+```
+
+Inside the brackets, all properties of the event are available as bare names:
+
+- [`click`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#instance_properties) → `altKey`, `ctrlKey`, `shiftKey`, `metaKey`, ...
+- [`keydown`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#instance_properties) → `key`, `code`, `repeat`, ...
+
+Global functions work too: `click[hasUnsavedChanges()]`.
+
+### `once`
+
+Fires once, then stops listening.
+
+```html
+<button hx-on="click once -> this.textContent = 'Done!'">Click me</button>
+```
+
+### `changed`
+
+Only fires if the element's `value` changed since last time.
 
 ```html
+<input hx-on="input changed -> console.log(this.value)">
+```
+
+Note: [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) is a DOM event. `changed` is an htmx modifier. Different things.
 
-<div hx-on:click="alert('Clicked!')">Click</div>
+### `delay:<time>`
+
+Waits before firing. If the event fires again, the delay resets (debounce).
+
+```html
+<input hx-on="input delay:500ms -> console.log(this.value)">
 ```
 
-Note that this syntax can be used to capture all htmx events, as well as most other custom events, in addition to the
-standard DOM events.
+### `throttle:<time>`
+
+Fires, then ignores further events for the given interval.
+
+```html
+<div hx-on="scroll throttle:100ms -> this.dataset.scrollY = window.scrollY"></div>
+```
+
+### `from:<selector>`
+
+Listens on a different element. Takes a CSS selector or an [extended selector](/docs/features/extended-selectors). Two special values: `self` (only the element itself, not children) and `outside` (anything outside the element).
 
-One gotcha to note is that DOM attributes do not preserve case. This means, unfortunately, an attribute like
-`hx-on:htmx:beforeRequest` **will not work**, because the DOM lowercases the attribute names. Fortunately, htmx supports
-both camel case event names and also [kebab-case event names](/reference/events), so you can use
-`hx-on:htmx:before:request` instead.
+```html
+<div hx-on="keydown[key=='Escape'] from:body -> this.hidden = true">
+<div hx-on="click from:outside -> this.hidden = true">
+```
 
-In order to make writing htmx-based event handlers a little easier, you can use the shorthand double-colon `hx-on::` for
-htmx
-events, and omit the "htmx" part:
+### `target:<selector>`
+
+Only fires if `event.target` matches the given CSS selector.
 
 ```html
-<!-- These two are equivalent -->
-<button hx-get="/info" hx-on:htmx:before:request="alert('Making a request!')">
-    Get Info!
-</button>
+<ul hx-on="click target:li -> event.target.classList.toggle('selected')"></ul>
+```
 
-<button hx-get="/info" hx-on::before:request="alert('Making a request!')">
-    Get Info!
-</button>
+### `prevent`
 
+Calls `event.preventDefault()`.
+
+```html
+<form hx-on="submit prevent -> console.log(new FormData(this))"></form>
 ```
 
-If you wish to handle multiple different events, you can simply add multiple attributes to an element:
+### `stop` / `consume`
+
+Calls `event.stopPropagation()`.
 
 ```html
+<button hx-on="click stop -> this.textContent = 'clicked'"></button>
+```
+
+### `halt`
+
+Shorthand for `prevent stop`.
 
-<button hx-get="/info"
-        hx-on::before:request="alert('Making a request!')"
-        hx-on::after:request="alert('Done making a request!')">
-    Get Info!
-</button>
+```html
+<a hx-on="click halt -> console.log(this.href)"></a>
 ```
 
-Finally, in order to make this feature compatible with some templating languages (
-e.g. [JSX](https://react.dev/learn/writing-markup-with-jsx)) that do not like having a colon (`:`)
-in HTML attributes, you may use dashes in the place of colons for both the long form and the shorthand form:
+### `capture`
+
+Listens during the capture phase (top-down) instead of the bubble phase (bottom-up).
 
 ```html
-<!-- These two are equivalent -->
-<button hx-get="/info" hx-on-htmx-before:request="alert('Making a request!')">
-    Get Info!
-</button>
+<div hx-on="click capture -> console.log('capture:', event.target.tagName)"></div>
+```
 
-<button hx-get="/info" hx-on--before:request="alert('Making a request!')">
-    Get Info!
-</button>
+### `passive`
 
+Tells the browser the handler won't call `preventDefault()`, so the browser can scroll without waiting for your code to finish.
+
+```html
+<div hx-on="scroll passive -> this.dataset.scrollY = window.scrollY"></div>
 ```
 
-### Symbols
+## 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
+### `this`
+
+The element the `hx-on` attribute is on.
+
+```html
+<button hx-on:click="this.classList.toggle('active')">Toggle</button>
+```
+
+### `event`
+
+The event that fired.
+
+Any properties on `event.detail` are unpacked into scope, so you can write `message` instead of `event.detail.message`:
+
+```html
+<!-- dispatched with detail: { message: 'hello' } -->
+<div hx-on="my-event -> alert(message)">
+<!-- equivalent to: alert(event.detail.message) -->
+</div>
+```
+
+## Notes
 
-### Notes
+* Works with any event, including [htmx events](/reference#events).
+* `hx-on` is _not_ inherited, but events on children still [bubble up](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture) and trigger it.
+* Both forms (`hx-on:event` and `hx-on="..."`) can coexist on the same element.
+* Browsers lowercase attribute names, so `hx-on:myEvent` won't match a `myEvent` dispatch. Use the extended form: `hx-on="myEvent -> ..."`.
+## See Also
 
-* `hx-on` is _not_ inherited, however due to
-  [event bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture),
-  `hx-on` attributes on parent elements will typically be triggered by events on child elements
+- [`hx-trigger`](/reference/attributes/hx-trigger) (attribute)
+- [Client Scripting](/docs/core-concepts/client-scripting) (guide)
+- [Extended Selectors](/docs/features/extended-selectors) (reference)
+- [Locality of Behaviour](/essays/locality-of-behaviour) (essay)