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.

Author: brackendawson

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
 <div hx-get="/clicked" hx-trigger="click[ctrlKey]">Control Click Me</div>
@@ -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:<Extended CSS selector>` - 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