`hx-trigger`

hx-trigger 属性允许您指定什么触发 AJAX 请求。触发器值可以是以下之一：

事件名称（例如 “click” 或 “my-custom-event”），后跟事件过滤器和一组事件修饰符
轮询定义形式为 every <timing declaration>
这样的事件的逗号分隔列表

标准事件

标准事件指的是 Web API 事件（例如 click、keydown、mouseup、load）。

标准事件，例如 click，可以像这样指定为触发器：

<div hx-get="/clicked" hx-trigger="click">Click Me</div>

标准事件过滤器

事件可以通过在事件名称后用方括号包围布尔 JavaScript 表达式来过滤。如果该表达式求值为 true，则事件将被触发，否则将被忽略。标准事件过滤器需要 eval。

<div hx-get="/clicked" hx-trigger="click[ctrlKey]">Control Click Me</div>

如果点击事件触发时 event.ctrlKey 属性设置为 true，此事件将触发。

条件还可以引用全局函数或状态

<div hx-get="/clicked" hx-trigger="click[checkGlobalState()]">Control Click Me</div>

并且可以使用标准 JavaScript 语法组合

<div hx-get="/clicked" hx-trigger="click[ctrlKey&&shiftKey]">Control-Shift Click Me</div>

请注意，表达式中使用的所有符号将首先针对触发事件解析，然后针对全局命名空间解析，因此 myEvent[foo] 将首先在事件上查找名为 foo 的属性，然后查找名为 foo 的全局符号

标准事件修饰符

标准事件还可以具有修饰符，这些修饰符会改变它们的行为。修饰符有：

once - 事件仅触发一次（例如，第一次点击）
changed - 仅当元素的值发生变化时事件才会触发。请注意 change 是事件名称，changed 是修饰符名称。
delay:<timing declaration> - 在事件触发请求之前会发生延迟。如果再次看到事件，它将重置延迟。
throttle:<timing declaration> - 在事件触发请求后会发生节流。如果在延迟完成之前再次看到事件，它将被忽略，元素将在延迟结束时触发。
from:<Extended CSS selector> - 允许触发请求的事件来自文档中的另一个元素（例如，在 body 上监听键事件，以支持热键）
- 标准 CSS 选择器解析为匹配该选择器的所有元素。因此，from:input 将在页面上的每个输入上监听。
- CSS 选择器仅在初始化时求值一次，当页面变化时不会重新求值。如果需要检测动态添加的元素，请使用标准事件过滤器，例如 hx-trigger="click[event.target.matches('button')] from:body"，这将捕获页面上每个按钮的点击事件。
- 此处的扩展 CSS 选择器允许以下非标准 CSS 值：
  - document - 在文档上监听事件
  - window - 在窗口上监听事件
  - closest <CSS selector> - 找到匹配给定 CSS 选择器的最近祖先元素或自身
  - find <CSS selector> - 找到匹配给定 CSS 选择器的最近子元素
  - next 解析为 element.nextElementSibling
  - next <CSS selector> 向前扫描 DOM，找到匹配给定 CSS 选择器的第一个元素。（例如，next .error 将针对具有 error 类的最近后续兄弟元素）
  - previous 解析为 element.previousElementSibling
  - previous <CSS selector> 向后扫描 DOM，找到匹配给定 CSS 选择器的第一个元素。（例如，previous .error 将针对具有 error 类的最近先前兄弟元素）
target:<CSS selector> - 允许您通过事件目标的 CSS 选择器进行过滤。这在您希望监听可能不在初始化时在 DOM 中的元素的触发器时很有用，例如，在 body 上监听，但使用子元素的 target 过滤器
consume - 如果包含此选项，事件不会在父元素上触发任何其他 htmx 请求（或在监听父元素上的元素上）
queue:<queue option> - 确定如果在另一个事件请求进行中发生事件时事件如何排队。选项有：
- first - 排队第一个事件
- last - 排队最后一个事件（默认）
- all - 排队所有事件（为每个事件发出请求）
- none - 不排队新事件

以下是一个搜索框的示例，它在 input 上搜索，但仅当搜索值发生变化且用户 1 秒内没有输入新内容时：

<input name="q"
       hx-get="/search" hx-trigger="input changed delay:1s"
       hx-target="#search-results"/>

来自 /search URL 的响应将被追加到具有 id search-results 的 div 中。

非标准事件

htmx 支持一些额外的非标准事件：

load - 在加载时触发（适用于懒加载某些内容）
revealed - 当元素滚动到视口中时触发（也适用于懒加载）。如果您在 CSS 中使用 overflow 如 overflow-y: scroll，则应使用 intersect once 而不是 revealed。
intersect - 当元素首次与视口相交时触发一次。此事件支持两个额外选项：
- root:<selector> - 相交的根元素的 CSS 选择器
- threshold:<float> - 介于 0.0 和 1.0 之间的浮点数，表示触发事件的相交量

通过 `HX-Trigger` 头触发

如果您试图从 HX-Trigger 响应头触发事件，您很可能希望使用 from:body 修饰符。例如，如果您发送像这样的头 HX-Trigger: my-custom-event 与响应，一个元素可能需要像这样：

  <div hx-get="/example" hx-trigger="my-custom-event from:body">
    Triggered by HX-Trigger header...
  </div>

才能触发。

这是因为该头很可能将在与您希望触发的元素不同的 DOM 层次结构中触发事件。出于类似原因，您通常会从 body 监听热键。

轮询

通过使用语法 every <timing declaration>，您可以让元素定期轮询：

<div hx-get="/latest_updates" hx-trigger="every 1s">
  Nothing Yet!
</div>

此示例将每秒向 /latest_updates URL 发出一次 GET，并将结果交换到此 div 的 innerHTML 中。

如果您想为轮询添加过滤器，它应该在轮询声明之后添加：

<div hx-get="/latest_updates" hx-trigger="every 1s [someConditional]">
  Nothing Yet!
</div>

多个触发器

可以提供多个触发器，用逗号分隔。每个触发器都有自己的选项。

  <div hx-get="/news" hx-trigger="load, click delay:1s"></div>

此示例将在页面加载时立即加载 /news，然后在每次点击后延迟 1 秒再次加载。

通过 JavaScript

AJAX 请求也可以通过 JavaScript htmx.trigger() 触发。

注意事项

hx-trigger 不是继承的
hx-trigger 可以无需 AJAX 请求使用，在这种情况下，它仅会触发 htmx:trigger 事件
为了将包含空白字符的 CSS 选择器（例如 form input）传递给 from- 或 target- 修饰符，请将选择器包围在括号或大括号中（例如 from:(form input) 或 from:closest (form input)）
hx-trigger 中的重置事件（例如 hx-trigger=“change, reset”）可能不会按预期工作，因为 HTMX 在浏览器重置表单值之前构建其值并发送请求。作为变通方法，添加延迟，让浏览器在发出请求之前重置表单（例如 hx-trigger=“change, reset delay:0.01s”）。

hx-trigger