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