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);
});

// Or using the `htmx.on()` method:

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