hx-on

hx-on* 属性允许你以嵌入脚本的形式直接响应元素上的事件；类似于 HTML 中的 onevent 属性，例如 onClick。

这些 hx-on* 属性通过启用对任意 JavaScript 事件的处理而得到改进，即使在处理非标准 DOM 事件时也能增强行为局部性 (LoB) 。例如，这些属性允许你处理 htmx 事件。

使用hx-on属性，你可以将事件名称指定为属性名称的一部分（在冒号后）。例如，如果你想要响应某个 click 事件，则可以使用以下属性 hx-on:click：

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

请注意，除了标准 DOM 事件之外，此语法还可用于捕获所有 htmx 事件以及大多数其他自定义事件。

需要注意的一点是 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，有两个参数可供事件处理程序脚本使用：

thishx-on - 定义属性的元素
event - 触发处理程序的事件

笔记

hx-on 不会被继承，但是由于事件冒泡， hx-on 属性上的父元素通常会由子元素上的事件触发
hx-on: 和 hx-on 不能在同一个元素上同时使用；如果 hx-on: 存在，则 hx-on 同一元素上的属性值将被忽略。不过，这两种形式可以在同一文档中混合使用。