hx-on

hx-on* 屬性允許您嵌入內聯腳本，直接響應元素上的事件；類似於 HTML 中找到的 onevent 屬性，例如 onClick。

hx-on* 屬性透過啟用處理任何任意 JavaScript 事件來改進 onevent，即使在處理非標準 DOM 事件時，也能增強行為局部性 (Locality of Behaviour, LoB)。例如，這些屬性允許您處理 htmx 事件。

使用 hx-on 屬性，您可以在屬性名稱中指定事件名稱，並在其後加上冒號。因此，舉例來說，如果您想要響應 click 事件，您可以使用屬性 hx-on:click

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

請注意，此語法可用於捕獲所有 htmx 事件，以及大多數其他自定義事件，以及標準 DOM 事件。

需要注意的一點是，DOM 屬性不會保留大小寫。這表示，不幸的是，像 hx-on:htmx:beforeRequest 這樣的屬性將無法運作，因為 DOM 會將屬性名稱轉換為小寫。幸運的是，htmx 支援駝峰式大小寫事件名稱以及 烤肉串式 (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>

最後，為了使此功能與某些不喜歡 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 一樣，兩個符號可用於事件處理程序腳本

注意事項