`hx-trigger`

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

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

标准事件

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

以下是一个搜索框的示例，该搜索框在 keyup 上搜索，但只有在搜索值发生更改且用户在 1 秒内没有输入任何内容的情况下才会搜索

<input name="q"
       hx-get="/search" hx-trigger="keyup 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:<选择器> - 交集的根元素的 CSS 选择器
- threshold:<浮点数> - 介于 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 层次结构中触发事件。出于类似的原因，您通常会从主体监听热键。

轮询

通过使用 every <时间声明> 语法，您可以让元素定期轮询

<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，然后在每次点击后延迟一秒再次加载。

通过 JavaScript

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

注意事项

hx-trigger 不会被继承
hx-trigger 可以不带 AJAX 请求使用，在这种情况下，它只会触发 htmx:trigger 事件
为了将包含空格的 CSS 选择器（例如 form input）传递给 from 或 target 修饰符，请将选择器括在括号或大括号中（例如 from:(form input) 或 from:closest (form input)）

hx-trigger