hx-on

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

¥The hx-on* attributes allow you to embed scripts inline to respond to events directly on an element; similar to the onevent properties found in HTML, such as onClick.

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

¥The hx-on* attributes improve upon onevent by enabling the handling of any arbitrary JavaScript event, for enhanced Locality of Behaviour (LoB) even when dealing with non-standard DOM events. For example, these attributes allow you to handle htmx events.

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

¥With hx-on attributes, you specify the event name as part of the attribute name, after a colon. So, for example, if you want to respond to a click event, you would use the attribute hx-on:click:

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

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

¥Note that this syntax can be used to capture all htmx events, as well as most other custom events, in addition to the standard DOM events.

需要注意的是，DOM 属性不保留大小写。不幸的是，这意味着像 hx-on:htmx:beforeRequest 这样的属性将不起作用，因为 DOM 将属性名称小写。幸运的是，htmx 支持驼峰式事件名称和 kebab-case 事件名称，因此你可以改用 hx-on:htmx:before-request。

¥One gotcha to note is that DOM attributes do not preserve case. This means, unfortunately, an attribute like hx-on:htmx:beforeRequest will not work, because the DOM lowercases the attribute names. Fortunately, htmx supports both camel case event names and also kebab-case event names, so you can use hx-on:htmx:before-request instead.

为了使编写基于 htmx 的事件处理程序更容易一些，你可以使用 htmx 事件的简写双冒号 hx-on::，并省略 “htmx” 部分：

¥In order to make writing htmx-based event handlers a little easier, you can use the shorthand double-colon hx-on:: for htmx events, and omit the “htmx” part:

<!-- 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>

如果你希望处理多个不同的事件，只需向元素添加多个属性即可：

¥If you wish to handle multiple different events, you can simply add multiple attributes to an element:

<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) 兼容，你可以在长格式和简写格式中用破折号代替冒号：

¥Finally, in order to make this feature compatible with some templating languages (e.g. JSX) that do not like having a colon (:) in HTML attributes, you may use dashes in the place of colons for both the long form and the shorthand form:

<!-- 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（已弃用）

¥hx-on (deprecated)

值是事件名称，后跟冒号 :，后跟脚本：

¥The value is an event name, followed by a colon :, followed by the script:

<button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')">
    Get Info!
</button>

可以通过将多个处理程序放在新行上来定义它们：

¥Multiple handlers can be defined by putting them on new lines:

<button hx-get="/info" hx-on="htmx:beforeRequest: alert('Making a request!')
                              htmx:afterRequest: alert('Done making a request!')">
    Get Info!
</button>

符号

¥Symbols

与 onevent 一样，事件处理程序脚本可以使用两个符号：

¥Like onevent, two symbols are made available to event handler scripts:

注释

¥Notes