From 08369730b682ae9b63803710ade4e6cdf0e3c483 Mon Sep 17 00:00:00 2001 From: Bracken Date: Fri, 4 Oct 2024 08:26:09 +0100 Subject: [PATCH] Clarify event filter uses in hx-trigger (#2914) * Clarify event filter uses in hx-trigger * Change hx-trigger event filter example to avoid ambiguity input is both a tag and an event. * Document the scope difference between standard selector and event filter from:input listens to the page and click[event.target.matches('input')] listens to the element. * Document that event filters as an alternative to CSS selectors require eval * Move note about eval to standard event filters section. * Simplify the referenced to standard event filters in the standard event modifiers section, and link to the standard event filters section instead. * End quote in the correct place in standard event modifier doc. * Correct language on how event filters from:body receive events. * hx-trigger filter example catches click events specifically. --- www/content/attributes/hx-trigger.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/content/attributes/hx-trigger.md b/www/content/attributes/hx-trigger.md index 6be72748..4475e96a 100644 --- a/www/content/attributes/hx-trigger.md +++ b/www/content/attributes/hx-trigger.md @@ -20,7 +20,7 @@ A standard event, such as `click` can be specified as the trigger like so: #### Standard Event Filters Events can be filtered by enclosing a boolean javascript expression in square brackets after the event name. If -this expression evaluates to `true` the event will be triggered, otherwise it will be ignored. +this expression evaluates to `true` the event will be triggered, otherwise it will be ignored. Standard event filters [require eval](@/docs.md#configuration-options). ```html
Control Click Me
@@ -56,7 +56,7 @@ is seen again it will reset the delay. is seen again before the delay completes, it is ignored, the element will trigger at the end of the delay. * `from:` - allows the event that triggers a request to come from another element in the document (e.g. listening to a key event on the body, to support hot keys) * A standard CSS selector resolves to all elements matching that selector. Thus, `from:input` would listen on every input on the page. - * The CSS selector is only evaluated once and is not re-evaluated when the page changes. If you need to detect dynamically added elements use an event filter, for example `click[event.target.matches('input')]` + * The CSS selector is only evaluated once and is not re-evaluated when the page changes. If you need to detect dynamically added elements use a [standard event filter](#standard-event-filters), for example `hx-trigger="click[event.target.matches('button')] from:body"` which would [catch](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling) click events from every button on the page. * The extended CSS selector here allows for the following non-standard CSS values: * `document` - listen for events on the document * `window` - listen for events on the window