使用 Django 與 HTMX 簡化動態網頁開發：觸發器（Trigger）應用指南

HTMX 的核心：觸發器 (Trigger) 與進階控制技術

在之前的文章中，我們探討了使用 HTMX 向伺服器發送請求的基本方法。我們也了解到，透過 hx-get、hx-post、hx-put、hx-delete 等屬性，即使沒有 JavaScript 的 fetch()，也能實現相當多的 Ajax 操作。

然而，在使用 HTMX 的過程中，我們可能會發現，與其控制發送什麼請求，不如控制何時發送請求更為重要。 這就是 hx-trigger 屬性登場的時機。

如果說 hx-get 或 hx-post 是決定「要做什麼」的屬性， 那麼 hx-trigger 則是決定「何時執行」的屬性。

如果沒有使用 hx-trigger，HTMX 可能只會被視為一個簡單的 Ajax 工具，僅在按鈕被點擊時發送請求。但一旦開始使用 hx-trigger，你會發現 HTMX 的實用性將大幅提升。

例如，以下這些功能都能在不寫 JavaScript 程式碼的情況下實現：

• 僅在輸入停止後才發送搜尋請求

• 防止短時間內的重複點擊

• 以固定週期自動重新整理

• 僅在元素出現在畫面上時才載入

• 僅在特定條件下才發送請求

• 調整不同請求的優先順序，避免衝突

我一開始也曾想：「不就是幾行 fetch 程式碼嗎？為什麼要特地用 HTMX？」當時我將 HTMX 視為一個單純的 Ajax 工具。但在體驗過 hx-trigger 強大的控制功能後，我的看法徹底改變了。

在本文中，我將整理 HTMX 的真正核心——觸發器與進階控制技術。

HTMX 不僅僅是個按鈕工具

初次接觸 HTMX 時，通常會從這樣的範例開始：

<button hx-get="/hello/" hx-target="#result">
    불러오기
</button>

<div id="result"></div>

單看這個，HTMX 可能會給人一種「按下按鈕就發送 Ajax 請求的工具」的感覺。

當然，光是這樣就已經很方便了。但這僅僅是 HTMX 的一部分功能。

真正重要的是，我們可以在 HTML 中宣告請求發生的時機和條件，而不僅僅是請求本身。

舉例來說：

• 在搜尋欄中每次輸入都向伺服器發送請求，會造成極差的使用者體驗。反之，如果只在輸入停止 500 毫秒後才發送請求，體驗將會自然許多。

• 有些按鈕可能不只是單純點擊，而是希望在按住 Ctrl 鍵時點擊才觸發。

• 或者，當捲動頁面，特定元素出現在畫面上時，才希望載入資料。

如果每次遇到這些情況都手動編寫 JavaScript，程式碼將會迅速增長。然而，HTMX 可以在很大程度上僅透過屬性組合，無需任何 JavaScript 程式碼來實現這些控制。

這一點確實令人驚訝。C++ 開發者初次看到 Python 程式碼時，可能會震驚地說：「什麼？不用宣告型別嗎？？」我初次接觸 HTMX 的 hx-trigger 時的感受，或許就與這種衝擊類似。

基本觸發器：click、change、submit

首先需要了解的是，HTMX 的設計與 HTML 元素的預設行為相得益彰。

例如，按鈕預設與 click 事件關聯，表單預設與 submit 事件關聯，而輸入元素則根據情況自然地與 change 等事件關聯。

<button hx-get="/load/" hx-target="#result">
    가져오기
</button>

這個按鈕即使沒有額外指定 hx-trigger="click"，在點擊時也會發送請求。

表單也是如此。

<form hx-post="/submit/" hx-target="#result">
    <input type="text" name="title">
    <button type="submit">전송</button>
</form>

在這種情況下，請求會在表單提交時發生。

換句話說，HTMX 在非常基本的場景中已經表現得相當智慧。但我們真正需要關注的，是從這裡開始的部分。

超越預設值，直接宣告我們想要的時機和條件。 這正是我們想要實現的。

hx-trigger 中常用的標準事件 vs. HTMX 專用觸發器

首先，熟悉下表至關重要。重點是：瀏覽器原生提供的 DOM 標準事件當然可以使用，此外還有一些 HTMX 專用觸發器。

hx-trigger 的值通常會先寫上事件 (event)，必要時再在後面加上篩選器 (filter) 和修飾符 (modifier) 進行組合。也就是說，我們可以依照「發生什麼事 (event)，在什麼條件下 (filter)，以什麼方式處理 (modifier)」的順序來解讀。其常見形式為 event[filter] modifier modifier。

<input
  hx-get="/search/"
  hx-trigger="keyup[value.length > 1] changed delay:500ms">

• keyup → 鍵盤按鍵釋放時

• [value.length > 1] → 僅在輸入值長度大於 1 時

• changed delay:500ms → 僅在值改變且 0.5 秒內沒有額外輸入時發送請求

幾個實用範例

雖然上面已經用表格整理過，但為了不留遺憾，我想再分享幾個我特別喜歡的觸發器範例。

僅在輸入停止後才發送請求：delay

在開發搜尋欄自動完成或即時篩選等功能時，如果使用者每次輸入都發送請求，不僅會增加伺服器負擔，也會讓使用者體驗顯得倉促。

此時使用 delay 就能讓體驗流暢許多。

<input type="text"
       name="q"
       hx-get="/search/"
       hx-trigger="keyup delay:500ms"
       hx-target="#search-result"
       placeholder="검색어를 입력하세요">
<div id="search-result"></div>

這段程式碼不會在使用者每次按下按鍵時立即發送請求。相反地，它會在輸入停止 500 毫秒後才發送請求。

這實際上就是去抖動 (debouncing)。

如果用 JavaScript 實現，需要設定計時器、取消前一個計時器，然後再重新設定，程式碼會比較複雜。但在 HTMX 中，只需一個屬性就能搞定。

在搜尋、自動推薦、篩選等 UI 中，這項功能幾乎可說是基本配置。

防止過於頻繁的發送：throttle

如果說 delay 的感覺是「輸入停止後稍等片刻再發送」，那麼 throttle 更接近於「限制在短時間內過於頻繁地發送請求」。

<button hx-post="/like/"
        hx-trigger="click throttle:1s"
        hx-target="#like-count">
    좋아요
</button>

在這種情況下，即使使用者非常快速地多次點擊按鈕，也能在 1 秒內控制請求不會過度連續發送。

在以下情況中會非常有用：

• 防止重複點擊

• 阻止過於頻繁的重複請求

• 減輕伺服器負擔

• 防止誤操作，重複執行相同動作

特別是在「按讚」、「儲存」、「重新整理」、「同步」等按鈕上，這是一個值得考慮的功能。

定期自動發送請求：every

在使用 HTMX 時，every 功能出乎意料地吸引人。

當你希望每隔固定週期從伺服器重新載入特定區域的資料時，無需額外編寫 JavaScript 的輪詢邏輯。

<div hx-get="/server-status/"
     hx-trigger="every 5s"
     hx-target="this">
    서버 상태를 불러오는 중...
</div>

這段程式碼會每 5 秒向 /server-status/ 發送 GET 請求，並用回傳的內容更新自身。

其應用場景比想像中更多樣：

• 伺服器狀態監控

• 顯示任務進度

• 更新儀表板數字

• 更新聊天通知數量

• 管理介面中的簡單即時資訊顯示

當然，如果頻繁地以過短的週期濫用，可能會對伺服器造成負擔，因此需要謹慎使用。但只要適當運用，僅憑 HTML 屬性就能實現如此功能，這正是 HTMX 的魅力所在。

僅在特定條件下才觸發：事件篩選

事件篩選功能真的非常棒。初次接觸這項功能時，我對 HTMX 的開發者和貢獻者們充滿了感激之情。這真是太棒了。

在 HTMX 中，我們可以在事件後附加條件，限制請求僅在特定情況下發生。

<button hx-delete="/post/123/"
        hx-trigger="click[ctrlKey]"
        hx-target="#post-123"
        hx-swap="outerHTML">
    삭제
</button>

這段程式碼不會在單純點擊時觸發。只有在按住 Ctrl 鍵並點擊時，才會發送刪除請求。

這種條件式觸發器雖然是個小細節，卻能讓使用者體驗顯得更加精緻。

例如：

• 僅在按下特定輔助鍵時執行

• 僅在核取方塊被選中時執行

• 僅在輸入值達到一定長度時才搜尋

• 當字串為空時不發送請求

可以擴展到類似的流程。

<input type="text"
       name="q"
       hx-get="/search/"
       hx-trigger="keyup[value.length > 1] delay:400ms"
       hx-target="#result">

這樣就能設定成只有在搜尋詞彙超過兩個字元時才發送請求。

load：頁面或元素準備就緒後立即執行

有時我們希望頁面一開啟，就能在某些區域填充資料。例如儀表板統計、推薦列表、通知區域等。

此時就可以使用 load。

<div hx-get="/dashboard/summary/"
     hx-trigger="load"
     hx-target="this">
    요약 정보를 불러오는 중...
</div>

這段程式碼會在對應元素載入後立即發送請求，並用回傳的內容替換或更新自身。

這也可以用於不完全由伺服器渲染整個頁面，而是將相對較重的某些區域延遲載入。換句話說，它非常適合簡單的延遲載入模式。

revealed：畫面中顯示時執行

這個觸發器的名稱非常直觀。它會在元素出現在畫面上時發送請求。

<div hx-get="/posts/next-page/"
     hx-trigger="revealed"
     hx-swap="afterend">
    더 많은 글을 불러오는 중...
</div>

這種方式常用於實現無限捲動。

當使用者向下捲動，使該元素顯示在畫面上時，就會載入下一批資料並附加在其後。其魅力在於，無需直接使用 JavaScript 的 Intersection Observer，也能實現相當自然的無限捲動效果。

然而，revealed 雖然簡單方便，但在需要非常精細的控制時可能會顯得不足。此時，接下來要介紹的 intersect 會更適合。

intersect：更精確地處理與視口的交叉

如果說 revealed 的感覺接近於「是否可見？」，那麼 intersect 則更精確地處理元素與視口交叉的程度和時機。

<div hx-get="/analytics/block/"
     hx-trigger="intersect once"
     hx-target="this">
    분석 영역 로딩 중...
</div>

這個範例中，該元素與視口交叉的瞬間只會發送一次請求。

這種方式適用於以下情況：

• 在長頁面中延遲載入較重的區塊

• 記錄廣告/橫幅的曝光時間

• 僅在特定區域實際顯示時才載入資料

• 依據捲動進度逐步填充內容

在無限捲動、懶載入、效能優化相關的頁面中，這是一個遲早會用到的功能。

伺服器與客戶端的對話：HX-Trigger 標頭

持續使用 HTMX 會發現，光靠瀏覽器發送請求有時會不夠用。當伺服器回應結束後，我們可能會希望其他 UI 元素也能同步動作。

例如，在以下情況中：

• 儲存完成後，希望重新載入列表

• 希望顯示儲存成功訊息

• 希望同時更新計數器數字

雖然可以將這些全部綁定在客戶端 JavaScript 中，但在 HTMX 中，伺服器可以透過標頭觸發事件。

例如，在 Django 視圖中：

from django.http import HttpResponse
import json

def save_item(request):
    response = HttpResponse("<div>저장 완료</div>")
    response["HX-Trigger"] = json.dumps({
        "itemSaved": {
            "message": "저장이 완료되었습니다."
        }
    })
    return response

然後客戶端就可以利用這些事件。

<div hx-get="/items/list/"
     hx-trigger="itemSaved from:body"
     hx-target="#item-list">
</div>

<div hx-get="/toast/success/"
     hx-trigger="itemSaved from:body"
     hx-target="#toast-area">
</div>

這種結構的優點很明確。

因為處理儲存請求的伺服器，不僅僅是傳送「儲存完成 HTML」，還能發送諸如「現在更新列表」、「顯示通知」等後續反應的訊號。

換句話說，伺服器與客戶端之間的對話，超越了單純的請求-回應關係，轉變為一種更鬆耦合的事件結構。

雖然一開始看起來微不足道，但隨著 UI 的規模擴大，這種模式將會變得越來越強大。

總結

在本文中，我們整理了 HTMX 的核心控制屬性，特別是圍繞 hx-trigger 的進階功能。

總結如下：

1. hx-trigger 決定請求何時發生

2. 觸發器屬性包含瀏覽器 DOM 的基本事件 (EVENT) 和 HTMX 專用事件。

3. 透過條件式觸發器，可以讓請求僅在特定情況下發生

4. 也可以透過修飾符屬性來精細調整事件。

5. 利用 HX-Trigger 標頭，伺服器可以觸發客戶端的後續動作

本文的總結大致如此。

所有這些功能都無需編寫任何 JavaScript 程式碼即可實現，這實在令人感激。更精確地說，應該是「無需編寫我自己的一行 JavaScript 程式碼」，因為透過 CDN 載入的 JavaScript 程式碼已經在瀏覽器中運行了。

延伸閱讀：

• 使用 Django 和 HTMX 簡化動態網頁開發 (1)
• 使用 Django 和 HTMX 簡化動態網頁開發 - Ajax (2)
• 使用 Django 和 HTMX 簡化動態網頁開發 (3)：Django 整合方法
• 使用 Django 和 HTMX 簡化動態網頁開發 (4)：Payload 傳輸方式
• 使用 Django 和 HTMX 簡化動態網頁開發：Form 與 Serializer 應用