Атрибут hx-on

Атрибуты hx-on* позволяют встраивать скрипты непосредственно в элементы для обработки событий, аналогично свойствам onevent в HTML, таким как onClick.

Атрибуты hx-on* улучшают onevent, добавляя возможность обработки любых JavaScript-событий, что усиливает Локализацию Поведения (LoB), включая нестандартные DOM-события. Например, они позволяют обрабатывать события htmx.

Для использования атрибутов hx-on укажите название события после двоеточия в имени атрибута. Например, для обработки события click используйте атрибут hx-on:click:

<div hx-on:click="alert('Нажато!')">Нажми</div>

Обратите внимание, что этот синтаксис можно использовать для обработки:

• всех событий htmx
• большинства пользовательских событий
• стандартных DOM-событий

Важное ограничение: DOM-атрибуты не сохраняют регистр. Это означает, что атрибут вида hx-on:htmx:beforeRequest не сработает, поскольку DOM преобразует имена атрибутов в нижний регистр.

Вместо этого используйте:

• camelCase: hx-on:htmx:beforeRequest → не работает
• kebab-case: hx-on:htmx:before-request → работает

Для упрощения обработки событий htmx доступен сокращённый синтаксис с двойным двоеточием hx-on::, где можно опустить префикс “htmx”:

<!-- Эти 2 кнопки идентичны -->
<button hx-get="/info" hx-on:htmx:before-request="alert('Делаем запрос!')">
  Получить информацию!
</button>

<button hx-get="/info" hx-on::before-request="alert('Делаем запрос!')">
  Получить информацию!
</button>

Для обработки нескольких событий просто добавьте соответствующие атрибуты к элементу:

<button hx-get="/info"
  hx-on::before-request="alert('Делаем запрос!')"
  hx-on::after-request="alert('Запрос выполнен!')">
  Получить информацию!
</button>

Наконец, для совместимости с некоторыми шаблонизаторами (например, JSX), которые не поддерживают двоеточия (:) в HTML-атрибутах, вы можете использовать дефисы вместо двоеточий в обеих формах записи:

<!-- Эти 2 кнопки идентичны -->
<button hx-get="/info" hx-on-htmx-before-request="alert('Делаем запрос!')">
  Получить информацию!
</button>

<button hx-get="/info" hx-on--before-request="alert('Делаем запрос!')">
  Получить информацию!
</button>

hx-on (устаревший вариант)

Значение состоит из имени события, за которым следует двоеточие :, а затем скрипт:

<button hx-get="/info" hx-on="htmx:beforeRequest: alert('Делаем запрос!')">
  Получить информацию!
</button>

Несколько обработчиков можно определить, разместив их на новых строках:

<button hx-get="/info"
  hx-on="htmx:beforeRequest: alert('Делаем запрос!')
  htmx:afterRequest: alert('Запрос выполнен!')">
  Получить информацию!
</button>

Специальные символы

Как и в onevent, в скриптах-обработчиках доступны два символа:

• this — Элемент, на котором определён атрибут hx-on
• event — Событие, вызвавшее обработчик

Примечания

• hx-on не наследуется, но благодаря всплытию событий, атрибуты hx-on на родительских элементах могут срабатывать на события дочерних элементов
• hx-on:* и hx-on нельзя использовать вместе на одном элементе — если присутствует hx-on:*, значение атрибута hx-on будет проигнорировано. Однако обе формы можно смешивать в пределах одного документа.