`hx-trigger`

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

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

标准事件

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

可以像这样指定标准事件（如click）作为触发器：

<div hx-get="/clicked" hx-trigger="click">点击我</div>

标准事件过滤器

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

<div hx-get="/clicked" hx-trigger="click[ctrlKey]">Ctrl+点击我</div>

当点击事件的event.ctrlKey属性为true时触发此事件。

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

<div hx-get="/clicked" hx-trigger="click[checkGlobalState()]">检查全局状态后点击我</div>

也可以使用标准JavaScript语法组合条件

<div hx-get="/clicked" hx-trigger="click[ctrlKey&&shiftKey]">Ctrl+Shift+点击我</div>

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

标准事件修饰符

标准事件也可以有改变其行为的修饰符。修饰符包括：

once - 事件仅触发一次（例如第一次点击）
changed - 仅当元素的值发生变化时触发事件。请注意change是事件名称，而changed是修饰符名称。
delay:<时间声明> - 事件触发请求前会有延迟。如果在此期间再次看到该事件，将重置延迟。
throttle:<时间声明> - 事件触发请求后会有节流。如果在延迟完成前再次看到该事件，将被忽略，元素将在延迟结束时触发。
from:<扩展CSS选择器> - 允许触发请求的事件来自文档中的另一个元素（例如监听body上的按键事件以支持热键）
- 标准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中的元素的触发器时，这很有用，例如监听body，但对子元素使用目标过滤器
consume - 如果包含此选项，事件将不会触发父元素（或监听父元素的元素）上的任何其他htmx请求
queue:<队列选项> - 确定当一个事件在另一个事件的请求正在进行中发生时如何排队事件。选项包括：
- 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:<选择器> - 用于相交的根元素的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">
    由HX-Trigger头触发...
  </div>

才能触发。

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

轮询

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

<div hx-get="/latest_updates" hx-trigger="every 1s">
  暂无更新!
</div>

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

如果要对轮询添加过滤器，应将其添加在轮询声明之后：

<div hx-get="/latest_updates" hx-trigger="every 1s [someConditional]">
  暂无更新!
</div>

多个触发器

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

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

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

通过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中的重置事件（例如hx-trigger="change, reset"）可能无法按预期工作，因为HTMX在浏览器重置表单值之前构建其值并发送请求。作为解决方法，添加延迟以让浏览器在发出请求之前重置表单（例如hx-trigger="change, reset delay:0.01s"）。

hx-trigger