HTMX - 事件

HTMX 提供了丰富的事件系统，允许您连接到 HTMX 请求生命周期中的各个点。这些事件可用于添加自定义行为、修改请求或响应 HTMX 操作的不同状态。

核心 HTMX 事件

HTMX 中有 4 种核心事件，如下所示。

请求生命周期事件

• htmx:beforeRequest: 在发出 AJAX 请求之前触发。
• htmx:beforeSend: 在发送请求之前触发。
• htmx:afterRequest: 在 AJAX 请求完成后触发。
• htmx:afterSettle: 在 DOM 稳定后触发。
• htmx:xhr:loadstart: 在请求开始。
• htmx:xhr:loadend: 请求结束时触发。
• htmx:xhr:progress: 请求期间定期触发。

响应事件

• htmx:beforeOnLoad: 在交换新内容之前触发。
• htmx:afterOnLoad: 在交换新内容之后触发。
• htmx:onLoadError: 交换期间发生错误时触发。

触发事件

• htmx:trigger: 通过以下方式触发元素时触发HTMX。
• htmx:validate: 在元素验证之前触发。
• htmx:validation:validate: 当输入即将被验证时触发。
• htmx:validation:failed: 当输入验证失败时触发。
• htmx:validation:halted: 当请求由于验证错误而停止时触发。

WebSocket 和 SSE 事件

• htmx:wsOpen: 当 WebSocket 连接打开时触发。
• htmx:wsClose: 当 WebSocket 连接关闭时触发关闭。
• htmx:wsBeforeMessage: 在处理 WebSocket 消息之前触发。
• htmx:wsAfterMessage: 在处理 WebSocket 消息之后触发。
• htmx:sseOpen: 在打开 SSE 连接时触发。
• htmx:sseMessage: 在收到 SSE 消息时触发。

处理 HTMX 事件

您可以使用标准 JavaScript 事件侦听器侦听 HTMX 事件。

document.body.addEventListener('htmx:afterOnLoad', function(event) {
    console.log('Content loaded!', event.detail.elt);
});

// 或者使用 `htmx.on()` 方法:

htmx.on('htmx:afterOnLoad', function(event) {
    console.log('Content loaded!', event.detail.elt);
});