HX-Trigger 响应头

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

这些头是

要触发单个事件而没有任何额外信息，你可以简单地像这样在头中发送事件名称

HX-Trigger: myEvent

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

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 对象添加额外的属性

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

你还可以通过发送用逗号分隔的事件名称来触发多个没有额外信息的事件，像这样

HX-Trigger: event1, event2

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

注意

3xx 响应代码不会处理响应头。请参见响应头