HTMX menyediakan event system yang kaya untuk custom behavior.

Listening Events

<div hx-get="/api" hx-trigger="click"
     hx-on::before-request="console.log('Sending...')">
  Load
</div>

Event Types

• htmx:beforeRequest — sebelum request dikirim
• htmx:afterRequest — setelah response diterima
• htmx:beforeSwap — sebelum DOM diupdate
• htmx:afterSwap — setelah DOM diupdate
• htmx:afterSettle — setelah CSS transitions selesai

JavaScript Listener

document.body.addEventListener("htmx:afterSwap", function(event) {
  console.log("Swapped:", event.detail.target)
})

Server-Triggered Events

Server bisa trigger event via header:

HX-Trigger: showMessage