hx-trigger

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

事件名称（例如“click”或“my-custom-event”）后跟事件过滤器和一组事件修饰符
定时，定义方式： every <timing declaration>
此类事件的列表(逗号分隔)

标准事件

标准事件 (例如 click, keydown, mouseup, load)。可以像这样指定为触发器：

<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> - 允许触发请求的事件来自文档中的另一个元素（例如，监听主体上的按键事件，以支持热键）
- 标准 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
consume- 如果包含此选项，则事件将不会触发对父级（或在父级上监听的元素）的任何其他 htmx 请求
queue:<queue option> - 确定当一个事件发生时另一个事件的请求正在进行时，事件如何排队。选项包括：
first - 将第一个事件加入队列
last - 将最后一个事件排入队列（默认）
all - 对所有事件进行排队（为每个事件发出请求）
none - 不排队新事件

下面是一个搜索框的示例，但仅当搜索值发生变化并且用户 1 秒内没有输入任何新内容时才会进行搜索：

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

来自 url /search 的响应将附加到指定 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通过HTTP头触发

如果你尝试从 HX-Trigger 响应头触发事件，则可能需要使用from:body修饰符。例如，如果你在响应中发送这样的HTTP头HX-Trigger: my-custom-event ，则元素可能需要如下所示：

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

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

轮询

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

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

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

如果要为轮询添加过滤器，则应在轮询声明后添加：

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

多个触发器

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

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

通过 JavaScript

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

笔记

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