hx-trigger — HTMX

hx-trigger menentukan event apa yang memicu request. Event Triggers Klik Hover saya Modifiers Sekali saja Submit Load saat terlihat Auto load

hx-trigger menentukan event apa yang memicu request.

Event Triggers

<!-- Default: click untuk button/a, submit untuk form, change untuk input -->
<button hx-get="/api">Klik</button>

<!-- Custom trigger -->
<div hx-get="/api" hx-trigger="mouseenter">Hover saya</div>
<input hx-get="/api/search" hx-trigger="keyup" />

Modifiers

<!-- Delay 500ms setelah event terakhir -->
<input hx-get="/search" hx-trigger="keyup changed delay:500ms" />

<!-- Hanya sekali -->
<div hx-get="/api" hx-trigger="click once">Sekali saja</div>

<!-- Throttle: max 1x per 2 detik -->
<button hx-get="/api" hx-trigger="click throttle:2s">Submit</button>

<!-- Saat elemen masuk viewport -->
<div hx-get="/api" hx-trigger="revealed">Load saat terlihat</div>

<!-- Saat halaman load -->
<div hx-get="/api" hx-trigger="load">Auto load</div>

Yang akan kamu pelajari