HX-觸發回應標頭

這些回應標頭可以用於在 htmx 回應的目標元素上觸發客戶端操作。您可以觸發單一事件，或觸發任意多個具有唯一名稱的事件。

這些標頭包括

要觸發單一事件且不包含額外詳細資訊，您只需在標頭中傳送事件名稱，如下所示

HX-Trigger: myEvent

這將在觸發元素上觸發 myEvent，並會冒泡到 body。例如，您可以像這樣監聽此事件

document.body.addEventListener("myEvent", function(evt){
    alert("myEvent was triggered!");
})

… 或像這樣，如果您嘗試觸發某些元素而不使用 JavaScript 程式碼

<!-- Since it bubbles up to the <body>, we must use the `from:body` modifier below -->
<div hx-trigger="myEvent from:body" hx-get="/example"></div>

如果您想傳遞事件的詳細資訊，可以使用 JSON 作為觸發器的值

HX-Trigger: {"showMessage":"這裡是一則訊息"}

要處理此事件，您需要編寫以下程式碼

document.body.addEventListener("showMessage", function(evt){
    alert(evt.detail.value);
})

請注意，訊息的值被放入 detail.value 插槽中。如果您希望傳遞多個資料片段，您可以在 JSON 物件的右側使用巢狀 JSON 物件

HX-Trigger: {"showMessage":{"level" : "info", "message" : "這裡是一則訊息"}}

並像這樣處理此事件

document.body.addEventListener("showMessage", function(evt){
   if(evt.detail.level === "info"){
     alert(evt.detail.message);   
   }
})

右側 JSON 物件的每個屬性都會複製到事件的詳細資訊物件上。

您可以透過在 JSON 物件中加入 target 引數，在其他目標元素上觸發事件。

HX-Trigger: {"showMessage":{"target" : "#otherElement"}}

如果您希望調用多個事件，只需將額外的屬性新增至頂層 JSON 物件

HX-Trigger: {"event1":"一則訊息", "event2":"另一則訊息"}

您也可以透過傳送以逗號分隔的事件名稱來觸發多個沒有額外詳細資訊的事件，如下所示

HX-Trigger: event1, event2

使用事件讓您可以非常靈活地將功能新增至正常的 htmx 回應。

注意事項

回應標頭不會在 3xx 回應碼上處理。請參閱回應標頭