hx-on

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

hx-on* 属性改进了 onevent，通过启用处理任何任意 JavaScript 事件， 从而增强了 Locality of Behaviour (LoB)，即使处理非标准 DOM 事件。例如，这些 属性允许您处理 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” 部分：

<!-- 这两个是等效的 -->
<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 属性中使用冒号 (:) ，您可以使用破折号代替冒号，既适用于长形式，也适用于简写形式：

<!-- 这两个是等效的 -->
<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 类似，向事件处理程序脚本提供了两个符号：

注意事项