`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>

如果觸發了 click 事件且 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 選擇器> - 允許觸發請求的事件來自文檔中的另一個元素 (例如，監聽 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 - 不將新事件排隊

以下是一個搜尋框的範例，它會在 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 層次結構中觸發事件。出於類似的原因，您通常會從 body 監聽熱鍵。

輪詢

通過使用語法 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