hx-on

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

hx-on* 属性通过支持处理任意 JavaScript 事件改进了 onevent，增强了 行为局部性 (LoB)，即使处理非标准 DOM 事件时也是如此。例如，这些属性允许您处理 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 事件处理程序的编写，您可以使用双冒号简写 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 类似，事件处理程序脚本中可使用两个符号：

注意事项