HX-Trigger 响应头

这些响应标头可用于触发对 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 对象的每个属性都将被复制到事件的详细信息对象上。

针对其他元素

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

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

如果您希望调用多个事件，您只需向顶级 JSON 对象添加其他属性：

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

您还可以通过发送以逗号分隔的事件名称来触发不需要其他详细信息的多个事件，如下所示：

HX-Trigger: event1, event2

使用事件为您提供了很大的灵活性，可以向正常的 htmx 响应添加功能。