HX-Trigger 响应标题

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

¥These response headers can be used to trigger client side actions on the target element within a response to htmx. You can trigger a single event or as many uniquely named events as you would like.

标题是：

¥The headers are:

要触发没有其他详细信息的单个事件，你只需在标题中发送事件名称，如下所示：

¥To trigger a single event with no additional details you can simply send the event name in a header like so:

HX-Trigger: myEvent

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

¥This will trigger myEvent on the triggering element and will bubble up to the body. As an example you could listen for this event like this:

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

…或者像这样，如果你尝试在不使用 JS 代码的情况下触发某些元素：

¥… or like this, if you’re trying to trigger some element without using JS code:

<!-- 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：

¥If you want to pass details along with the event, you can move to JSON for the value of the trigger:

HX-Trigger: {"showMessage":"Here Is A Message"}

要处理此事件，你需要编写以下代码：

¥To handle this event you would write the following code:

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

请注意，消息的值已放入 detail.value 插槽中。如果你希望传递多个数据，则可以在 JSON 对象的右侧使用嵌套的 JSON 对象：

¥Note that the value of the message was put into the detail.value slot. If you wish to pass multiple pieces of data you can use a nested JSON object on the right hand side of the JSON object:

HX-Trigger: {"showMessage":{"level" : "info", "message" : "Here Is A Message"}}

并像这样处理此事件：

¥And handle this event like so:

document.body.addEventListener("showMessage", function(evt){
   if(evt.detail.level === "info"){
     alert(evt.detail.message);   
   }
})

右侧 JSON 对象的每个属性都将复制到事件的详细信息对象上。

¥Each property of the JSON object on the right hand side will be copied onto the details object for the event.

定位其他元素

¥Targeting Other Elements

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

¥You can trigger events on other target elements by adding a target argument to the JSON object.

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

多个触发器

¥Multiple Triggers

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

¥If you wish to invoke multiple events, you can simply add additional properties to the top level JSON object:

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

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

¥You may also trigger multiple events with no additional details by sending event names separated by commas, like so:

HX-Trigger: event1, event2

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

¥Using events gives you a lot of flexibility to add functionality to normal htmx responses.

注释

¥Notes

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

¥Response headers are not processed on 3xx response codes. see Response Headers