属性hx-on*​

HTML 允许通过 onevent 属性（例如 onClick）嵌入内联脚本：

<button onclick="alert('You clicked me!')">
    Click Me!
</button>

此功能允许脚本逻辑与逻辑适用的 HTML 元素位于同一位置，从而提供良好的行为局部性 （LoB）。不幸的是，HTML 只允许固定数量的特定 DOM 事件（例如 onclick）的 on* 属性，并且没有提供响应元素上任意事件的通用机制。

为了解决这一缺点，htmx 提供了 hx-on 属性。这些属性允许你以保留标准属性的 LoB 的方式响应任何 on 事件。

如果我们想使用 hx-on 属性来响应单击事件，我们可以这样写：

<button hx-on:click="alert('You clicked me!')">
    Click Me!
</button>

用法是字符串 hx-on 后跟冒号（或破折号），然后是事件的名称。

当然，对于单击事件，我们建议坚持使用标准 onclick 属性。但是，考虑一个希望使用 on* 事件向请求添加参数的 htmx 驱动按钮 htmx:config-request 。使用标准属性无法做到这一点，但可以使用 hx-on:htmx:config-request 属性来完成：

<button hx-post="/example"
        hx-on:htmx:config-request="event.detail.parameters.example = 'Hello Scripting!'">
    Post Me!
</button>

此处，example 参数在发出请求之前添加到 POST 请求中，其值为 “Hello Scripting！”。

这些 hx-on* 属性是一种非常简单的通用嵌入式脚本机制。它不能替代更完善的前端脚本解决方案，例如 AlpineJS 或 hyperscript。但是，它可以增强基于 VanillaJS 的脚本方法，以在基于 htmx 的应用程序中编写脚本。

请注意，HTML 属性不区分大小写。这意味着，不幸的是，依赖大写字母/驼峰式大小写的事件无法得到响应。如果你需要支持驼峰式大小写事件，我们建议使用功能更齐全的脚本解决方案，例如 AlpineJS 或 hyperscript。正是出于这个原因，htmx 以驼峰式大小写和短横线大小写两种方式调度其所有事件。