HX-Trigger 响应头

这些响应头可用于在响应 htmx 的目标元素上触发客户端操作。您可以触发单个事件，或者触发任意数量的唯一命名的多个事件。

这些头包括：

要触发一个没有额外细节的单个事件，您只需在头中发送事件名称即可：

HX-Trigger: myEvent

这将在触发元素上触发 myEvent，并冒泡到 body 上。例如，您可以像这样监听此事件：

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

… 或者如果您想在不使用 JS 代码的情况下触发某些元素，可以像这样：

<!-- 由于它会冒泡到 <body>，因此下面必须使用 `from:body` 修饰符 -->
<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 对象右侧的每个属性将被复制到事件的 details 对象上。

您可以通过在 JSON 对象中添加 target 参数来在其他目标元素上触发事件。

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

如果您希望调用多个事件，只需在顶级 JSON 对象中添加额外的属性即可：

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

您也可以通过用逗号分隔事件名称来触发没有额外细节的多个事件，例如：

HX-Trigger: event1, event2

使用事件可以为普通的 htmx 响应添加大量灵活的功能。

注意事项

响应头不会在 3xx 响应代码上处理。请参阅响应头