HX-Trigger 响应头

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

头信息包括：

要触发没有附加细节的单个事件，可以简单地在头信息中发送事件名称：

HX-Trigger: myEvent

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

document.body.addEventListener("myEvent", function(evt){
    alert("myEvent被触发了!");
})

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

<!-- 由于它冒泡到<body>，我们必须在下面使用`from:body`修饰符 -->
<div hx-trigger="myEvent from:body" hx-get="/example"></div>

如果想随事件传递细节，可以改用JSON作为trigger的值：

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对象右侧的每个属性都将被复制到事件的details对象上。

定位其他元素

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

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

多重触发

如果想触发多个事件，只需在顶层JSON对象中添加额外属性：

HX-Trigger: {"event1":"消息1", "event2":"消息2"}

您也可以通过发送逗号分隔的事件名称来触发多个没有附加细节的事件：

HX-Trigger: event1, event2

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

注意事项

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