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

> Master htmx trigger modifiers like once, changed, and delay to control event execution. Optimize your htmx event handling for better performance and user experience.

- Repository: [Big Sky Software/htmx](https://github.com/bigskysoftware/htmx)
- Tags: tutorial
- Published: 2026-08-30

---

**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`](https://github.com/bigskysoftware/htmx/blob/main/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:<time>**: Waits the specified duration (e.g., `delay:500ms` or `delay:2s`) before sending; resets if the event fires again.
- **throttle:<time>**: Limits execution to once per specified interval, discarding intervening events.
- **from:<CSS selector>**: 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`](https://github.com/bigskysoftware/htmx/blob/main/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:

```html
<!-- 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`](https://github.com/bigskysoftware/htmx/blob/main/www/content/docs.md) within the "Trigger Modifiers" section (lines 44-52). For complete syntax specifications, consult [`www/content/attributes/hx-trigger.md`](https://github.com/bigskysoftware/htmx/blob/main/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`](https://github.com/bigskysoftware/htmx/blob/main/www/content/docs.md) and [`www/content/attributes/hx-trigger.md`](https://github.com/bigskysoftware/htmx/blob/main/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.