hx-on

hx-on* 属性允许您内嵌脚本，以直接对元素上的事件做出响应；类似于 HTML 中的 onevent 属性，例如 onClick。

hx-on* 属性在 onevent 的基础上进行了改进，它能够处理任何任意 JavaScript 事件，从而即使在处理非标准 DOM 事件时，也能实现更强的 行为局部性 (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 支持驼峰式事件名称和 短横线分隔式事件名称，因此您可以使用 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 一样，两个符号可用于事件处理程序脚本。

备注