HX トリガレスポンスヘッダー

これらのレスポンスヘッダーは、htmx へのレスポンス内のターゲット要素でクライアント側のアクションをトリガするために使用できます。単一のイベントまたは、必要なだけの固有の名前を持つイベントをトリガできます。

ヘッダーは次のとおりです。

追加の詳細を指定せずに単一のイベントをトリガするには、次のようにヘッダーでイベント名を指定します。

HX-Trigger: myEvent

トリガー要素で myEvent がトリガされ、ボディにバブルアップします。例として、このイベントを次のようにリッスンできます。

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

JS コードを使用せずに一部の要素をトリガしようとしている場合は、次のように記述できます。

<!-- 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":"Here Is A Message"}

このイベントを処理するには、次のコードを作成します。

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

メッセージの値が detail.value スロットに配置されます。複数のデータを渡す場合は、JSON オブジェクトの右側にネストされた JSON オブジェクトを使用できます。

HX-Trigger: {"showMessage":{"level" : "info", "message" : "Here Is A 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 オブジェクトに additional プロパティを追加します。

HX-Trigger: {"event1":"A message", "event2":"Another message"}

イベント名をカンマで区切って送信すると、追加の詳細を指定せずに複数のイベントをトリガできます。

HX-Trigger: event1, event2

イベントを使用すると、通常の htmx レスポンスに機能を追加する柔軟性が高まります。

注意

レスポンスヘッダーは 3xx レスポンスコードでは処理されません。レスポンスヘッダーを参照してください。