hx-on

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

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

Существует две формы атрибутов hx-on:

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

• Вторая, устаревшая форма, использует атрибут hx-on напрямую. Эту форму следует использовать только если требуется поддержка IE11, и она будет удалена в htmx 2.0

hx-on:* (рекомендуемый)

В этой форме имя события следует за двоеточием : в атрибуте, а значение атрибута — это скрипт, который нужно выполнить:

<div hx-on:click="alert('Clicked!')">Click</div>

Обратите внимание, что помимо стандартных событий DOM, можно также обрабатывать события htmx и другие пользовательские события.

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

Для упрощения написания обработчиков событий на основе htmx можно использовать сокращенную форму с двумя двоеточиями hx-on:: для событий htmx и опустить «htmx»:

<!-- These two are equivalent -->
<button hx-get="/info" hx-on:htmx:before-request="alert('Making a request!')">
    Get Info!
</button>
<button hx-get="/info" hx-on::before-request="alert('Making a request!')">
    Get Info!
</button>

Если вы хотите обработать несколько разных событий, просто добавьте несколько атрибутов к элементу:

<button hx-get="/info"
hx-on::before-request="alert('Making a request!')"
hx-on::after-request="alert('Done making a request!')">
    Get Info!
</button>

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

<!-- These two are equivalent -->
<button hx-get="/info" hx-on-htmx-before-request="alert('Making a request!')">
    Get Info!
</button>
<button hx-get="/info" hx-on--before-request="alert('Making a request!')">
    Get Info!
</button>

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

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

<button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')">
    Get Info!
</button>

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

<button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')
                              htmx:afterRequest: alert('Done making a request!')">
    Get Info!
</button>

Символы

Подобно onevent, для скриптов обработчиков событий доступны два символа:

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

Примечания

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