hx-trigger

Синтаксис

<!-- hx-trigger="<event>[<filter>] <modifiers> [, ...]" -->

<!-- Basic (click is the default) -->
<button hx-get="...">

<!-- With from: modifier, listen on a different element -->
<button hx-trigger="click from:outside" hx-get="...">

<!-- With a filter -->
<button hx-trigger="click[shiftKey]" hx-get="...">

<!-- Multiple triggers -->
<button hx-trigger="click, keyup[key=='Enter']" hx-get="...">

Стандартные события

hx-trigger принимает любое событие DOM: click, input, keyup, submit и т. д.

<button hx-trigger="click" hx-post="...">
<input hx-trigger="input" hx-get="...">
<form hx-trigger="submit" hx-post="...">
<div hx-trigger="mouseenter" hx-get="...">

Пользовательские события

Пользовательские события тоже поддерживаются. Отправляйте их из JavaScript с помощью htmx.trigger() или с сервера через заголовок ответа HX-Trigger.

События из HX-Trigger отправляются на body, поэтому используйте from:body для их прослушивания:

<div hx-trigger="productsUpdated from:body" hx-get="...">...</div>

Синтетические события

htmx предоставляет синтетические события помимо стандартных событий DOM:

load

Срабатывает при загрузке элемента в DOM. Полезно для ленивой загрузки (lazy-loading) контента.

<div hx-trigger="load" hx-get="...">Loading...</div>

revealed

Срабатывает, когда элемент попадает в область видимости при прокрутке. Полезно для бесконечной прокрутки (infinite scroll).

<div hx-trigger="revealed" hx-get="...">Loading...</div>

Примечание: revealed всегда отслеживает область видимости браузера. Для прокручиваемых контейнеров с overflow используйте вместо этого intersect с root.

intersect

Срабатывает, когда элемент становится видимым в области видимости.

Использует IntersectionObserver API.

Модификаторы:

• root
• rootMargin
• threshold

<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>

every <time>

Срабатывает периодически с заданным интервалом.

<div hx-trigger="every 1s" hx-get="/updates">...</div>

Чтобы добавить фильтр к опросу (polling), укажите его после интервала:

<div hx-trigger="every 1s [someConditional]" hx-get="/updates">...</div>

Модификаторы событий

[filter]

JavaScript-выражение в квадратных скобках после имени события. Срабатывает только тогда, когда оно вычисляется как true.

<input hx-trigger="keyup[key == 'Enter']" hx-get="/search">

Внутри скобок все свойства события доступны напрямую по их именам:

• click → altKey, ctrlKey, shiftKey, metaKey, …
• keydown → key, code, repeat, …

Глобальные функции также работают: click[hasUnsavedChanges()].

once

Срабатывает один раз, после чего прекращает прослушивание.

<button hx-trigger="click once" hx-get="...">Load Once</button>

changed

Срабатывает только в том случае, если value элемента изменилось с прошлого раза.

<input hx-trigger="input changed" hx-get="...">

Примечание: change — это событие DOM. changed — это модификатор htmx. Это разные вещи.

delay:<time>

Ожидает перед срабатыванием. Если событие возникает снова, задержка сбрасывается (debounce).

<input hx-trigger="input delay:1s" hx-get="...">

throttle:<time>

Срабатывает, а затем игнорирует последующие события в течение указанного интервала времени.

<div hx-trigger="scroll throttle:500ms" hx-get="...">...</div>

from:<selector>

Прослушивает другой элемент. Принимает селектор CSS или расширенный селектор. Два специальных значения: self (только сам элемент, без дочерних) и outside (всё, что за пределами элемента).

<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>

target:<selector>

Срабатывает только в том случае, если event.target соответствует указанному селектору CSS.

<div hx-trigger="click target:.child-button" hx-get="...">...</div>

prevent

Вызывает event.preventDefault().

<form hx-trigger="submit prevent" hx-post="...">...</form>

stop / consume

Вызывает event.stopPropagation().

<button hx-trigger="click stop" hx-get="...">...</button>

halt

Краткая форма для prevent stop.

<a hx-trigger="click halt" hx-get="...">...</a>

capture

Прослушивает событие на фазе захвата (capture phase, сверху вниз) вместо фазы всплытия (bubble phase, снизу вверх).

<div hx-trigger="click capture" hx-get="...">...</div>

passive

Сообщает браузеру, что обработчик не будет вызывать preventDefault(), позволяя браузеру выполнять прокрутку, не дожидаясь завершения работы вашего кода.

<div hx-trigger="scroll passive" hx-get="...">...</div>

Пример

Поле поиска, которое выполняет поиск по событию input, но только если значение изменилось (changed) и пользователь не вводил ничего нового в течение 1 секунды (delay):

<input name="q"
       hx-trigger="input changed delay:1s"
       hx-get="/search"
       hx-target="#search-results"/>

Примечания

• Для селекторов с пробелами в from или target требуются круглые скобки: from:(form input).
• hx-trigger="change, reset" может сработать до того, как браузер сбросит форму. В качестве обходного пути добавьте небольшую задержку: hx-trigger="change, reset delay:0.01s".

Смотрите также

• hx-on (атрибут)
• Расширенные селекторы (справка)
• Ленивая загрузка (Lazy Load) (шаблон)
• Бесконечная прокрутка (Infinite Scroll) (шаблон)
• Индикатор выполнения (Progress Bar) (шаблон)