htmx Trigger Modifiers Explained: once, changed, delay, and More

htmx trigger modifiers are suffixes appended to event names in the hx-trigger attribute that control execution frequency, timing, and source elements, including once, changed, delay:<time>, throttle:<time>, and from:<CSS selector>.

The bigskysoftware/htmx library allows you to customize AJAX request behavior through the hx-trigger attribute. Understanding the available htmx trigger modifiers is essential for optimizing performance and user experience, as these modifiers determine when and how often requests are dispatched in response to DOM events.

Available htmx Trigger Modifiers

According to the source documentation in www/content/docs.md (lines 44-52), htmx supports five primary modifiers that append to standard event names:

• once: Executes the request only the first time the event fires.
• changed: Issues a request only if the element's value differs from the previous request.
• delay:: Waits the specified duration (e.g., delay:500ms or delay:2s) before sending; resets if the event fires again.
• throttle:: Limits execution to once per specified interval, discarding intervening events.
• from:: Listens for events on a different element than the one making the request.

Special Trigger Events vs. Modifiers

While not modifiers themselves, htmx provides special trigger events like load, revealed, and intersect (documented in www/content/events.md) that can be combined with these modifiers for advanced behaviors.

Practical Examples of Trigger Modifiers

Here are concrete implementations demonstrating each modifier:

<!-- once: Only trigger on first mouseenter -->
<div hx-get="/welcome" hx-trigger="mouseenter once"></div>

<!-- changed + delay: Search as user types, but only if value changed and after pause -->
<input type="text" 
       hx-get="/search" 
       hx-trigger="keyup changed delay:500ms"
       hx-target="#results">

<!-- throttle: Load more content on scroll, max once per second -->
<div hx-get="/page/2" 
     hx-trigger="scroll throttle:1s"
     hx-target="#content"></div>

<!-- from: Close modal on Escape key anywhere in document -->
<div id="modal" 
     hx-get="/close" 
     hx-trigger="keydown[code=='Escape'] from:document"></div>

Source Code Reference

The modifier system is documented in the htmx source at www/content/docs.md within the "Trigger Modifiers" section (lines 44-52). For complete syntax specifications, consult www/content/attributes/hx-trigger.md, which defines the attribute's behavior in the bigskysoftware/htmx repository.

Summary

• htmx provides five core modifiers: once, changed, delay, throttle, and from.
• Modifiers are appended directly to event names in the hx-trigger attribute.
• delay resets its timer on subsequent events, while throttle discards events within the interval.
• The from modifier enables event delegation to parent or sibling elements.
• These features are documented in www/content/docs.md and www/content/attributes/hx-trigger.md.

Frequently Asked Questions

What is the difference between the delay and throttle modifiers?

The delay modifier waits for the specified time interval of inactivity before issuing the request, resetting the timer if the event fires again. The throttle modifier ensures the request executes immediately when the event fires, but then ignores subsequent events until the interval expires.

Can I combine multiple modifiers on a single trigger?

Yes. You can chain modifiers together in the hx-trigger attribute, such as hx-trigger="keyup changed delay:500ms" to only trigger when the value has changed and after the user stops typing for half a second.

Do trigger modifiers work with htmx's special events like revealed?

Yes. Modifiers work with standard DOM events and htmx-specific events like revealed, load, and intersect. For example, hx-trigger="revealed once" ensures the request fires only the first time an element scrolls into view.

How do I use the from modifier with CSS selectors?

Append from: followed by a valid CSS selector to listen on a different element. For example, hx-trigger="click from:#button" causes the element to trigger when the element with id button is clicked, rather than when it is clicked itself.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}