hx-on

hx-on* 属性を使用すると、onevent プロパティなどの、HTML で見られるイベントに直接応答するように、スクリプトをインラインで埋め込むことができます。例えば、onClick などです。

hx-on* 属性は onevent を改良し、任意の JavaScript イベントを処理できるようになっています。これにより、標準外の DOM イベントを扱う場合でも 局所的な動作 (LoB) が強化されます。例えば、これらの属性は htmx イベント を処理できます。

hx-on 属性では、コロンの後に属性名のイベント名を指定します。例えば、click イベントに応答するには、hx-on:click 属性を使用します。

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

この構文は標準 DOM イベントに加え、すべての htmx イベントと、ほとんどのカスタムイベントをキャプチャするために使用できます。

注意すべき落とし穴の 1 つは、DOM 属性では大文字と小文字が区別されないことです。残念ながら、これにより hx-on:htmx:beforeRequest などの属性は 機能しません。これは、DOM では属性名が小文字に変換されるためです。幸いなことに、htmx ではキャメルケースのイベント名と ケバブケースのイベント名 の両方がサポートされています。そのため、代わりに hx-on:htmx:before-request を使用できます。

htmx ベースのイベントハンドラをより簡単に記述するために、htmx イベントの省略記号である二重コロン hx-on:: を使用して、"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>

最後に、HTML 属性にコロン (:) を含めることができないテンプレート言語 (例: JSX) とこの機能を互換性を持たせるために、コロンの代わりにダッシュを使用できます。これは、ロングフォームと省略記号の両方で可能です。

<!-- 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 と同様に、2 つの記号がイベントハンドラスクリプトに使用できます。

注意