hx-trigger
hx-trigger には、いろいろなオプションが用意されています。
<a href="/sample/demo.html" hx-get="/sample/demo.html" hx-swap="outerHTML" hx-trigger="mouseover">demo</a>
クリックしなくても、マウスオーバーで変わります。
※ hx-trigger を mouseover から every 3s に変更してみましょう！
<select name="sample" hx-get="/sample/demo.html" hx-swap="afterend" hx-trigger="change"> <option value="aaa">aaa</option> <option value="bbb">bbb</option> <option value="ccc">ccc</option> </select>
SELECT を変更すると下に追加されます。
hx-trigger option
| click | ユーザーが要素をクリックしたときにリクエストを発行する |
|---|---|
| change | 入力フィールドやセレクトボックスの値が変更されたときにリクエストを発行する |
| keyup | キーボードのキーが離されたときにリクエストを発行する |
| keydown | キーボードのキーが押されたときにリクエストを発行する |
| mouseover | 要素にマウスカーソルが乗ったときにリクエストを発行する |
| mouseout | 要素からマウスカーソルが外れたときにリクエストを発行する |
| focus | 要素がフォーカスを得たときにリクエストを発行する |
| blur | 要素からフォーカスが外れたときにリクエストを発行する |
| load | 要素が読み込まれたときに一度だけリクエストを発行する |
| submit | フォームの送信をトリガーとしてリクエストを発行する |
| every 3s | 指定された間隔で定期的にリクエストを発行する （この場合3秒） |
