イベント

htmx は、動作の変更や拡張に使用できる広範なイベントシステムを提供します。イベントは以下にリストされています。

#イベント - htmx:abort

このイベントは他のイベントとは異なります。htmx はこのイベントをトリガーするのではなく、リッスンします。

リクエストを作成している要素に htmx:abort イベントを送信すると、リクエストが中断されます。

<button id="request-button" hx-post="/example">Issue Request</button>
<button onclick="htmx.trigger('#request-button', 'htmx:abort')">Cancel Request</button>

#イベント - htmx:afterOnLoad

このイベントは、AJAX onload が完了した後にトリガーされます。これはコンテンツがまだスワップまたは確定されていないことを意味するのではなく、リクエストが完了しただけであることに注意してください。

#詳細

#イベント - htmx:afterProcessNode

このイベントは、htmx が DOM ノードを初期化した後にトリガーされます。拡張機能がノードに追加機能を追加するのに役立ちます。

#詳細

#イベント - htmx:afterRequest

このイベントは、リクエストが成功した場合（404などのリモートエラーコードを返した場合も含む）またはネットワークエラーが発生した場合に、AJAXリクエストが完了した後にトリガーされます。このイベントは htmx:beforeRequest と組み合わせて、リクエストサイクルをラップできます。

#詳細

#イベント - htmx:afterSettle

このイベントは、DOM が 確定 した後にトリガーされます。

#詳細

#イベント - htmx:afterSwap

このイベントは、新しいコンテンツが DOM にスワップされた後にトリガーされます。

#詳細

#イベント - htmx:beforeCleanupElement

このイベントは、htmx が要素を 無効にする または DOM から削除する前にトリガーされます。

#詳細

#イベント - htmx:beforeOnLoad

このイベントは、レスポンス処理が発生する前にトリガーされます。イベントがキャンセルされた場合、スワップは発生しません。

#詳細

#イベント - htmx:beforeProcessNode

このイベントは、htmx が DOM ノードを初期化し、すべての hx- 属性を処理する前にトリガーされます。これにより、拡張機能やその他の外部コードは、DOM ノードが処理される前にその内容を変更できます。

#詳細

#イベント - htmx:beforeRequest

このイベントは、AJAX リクエストが発行される前にトリガーされます。イベントがキャンセルされた場合、リクエストは発生しません。

#詳細

#イベント - htmx:beforeSend

このイベントは、リクエストが送信される直前にトリガーされます。このイベントでリクエストをキャンセルすることはできません。

#詳細

#イベント - htmx:beforeSwap

このイベントは、新しいコンテンツが DOM にスワップされる前にトリガーされます。イベントがキャンセルされた場合、スワップは発生しません。

イベント詳細の shouldSwap および target プロパティを変更することで、デフォルトのスワップ動作を変更できます。詳細については、スワップの構成に関するドキュメントを参照してください。

#詳細

#イベント - htmx:beforeTransition

このイベントは、View Transition ラップされたスワップが発生する前にトリガーされます。イベントがキャンセルされた場合、View Transition は発生せず、代わりに通常のスワップロジックが発生します。

#詳細

#イベント - htmx:configRequest

このイベントは、htmx がリクエストに含めるパラメータを収集した後にトリガーされます。これは、htmx が送信するパラメータを含めるか更新するために使用できます。

document.body.addEventListener('htmx:configRequest', function(evt) {
    evt.detail.parameters['auth_token'] = getAuthToken(); // add a new parameter into the mix
});

入力値が複数回出現する場合、parameters オブジェクトの値は単一の値ではなく配列になることに注意してください。

#詳細

#イベント - htmx:confirm

このイベントは、リクエストのすべてのトリガーで発生します（hx-confirm 属性を持つ要素だけでなく）。これにより、AJAX リクエストの発行をキャンセル (または遅延) することができます。イベントで preventDefault() を呼び出すと、指定されたリクエストは発行されません。detail オブジェクトには、後で実際の AJAX リクエストを発行するために使用できる関数 evt.detail.issueRequest(skipConfirmation=false) が含まれています。これら 2 つの機能を組み合わせることで、非同期確認ダイアログを作成できます。

デフォルトの動作を変更せずに htmx:confirm イベントの基本的な使用方法を示す基本的な例を次に示します。

document.body.addEventListener('htmx:confirm', function(evt) {
  // 0. To modify the behavior only for elements with the hx-confirm attribute,
  //    check if evt.detail.target.hasAttribute('hx-confirm')

  // 1. Prevent the default behavior (this will prevent the request from being issued)
  evt.preventDefault();
  
  // 2. Do your own logic here
  console.log(evt.detail)

  // 3. Manually issue the request when you are ready
  evt.detail.issueRequest(); // or evt.detail.issueRequest(true) to skip the built-in window.confirm()
});

また、confirm-with-sweet-alert="{question}" 属性を持つ要素で sweet alert を使用した例を次に示します。

document.body.addEventListener('htmx:confirm', function(evt) {
  // 1. The requirement to show the sweet alert is that the element has a confirm-with-sweet-alert
  //    attribute on it, if it doesn't we can return early and let the default behavior happen
  if (!evt.detail.target.hasAttribute('confirm-with-sweet-alert')) return

  // 2. Get the question from the attribute
  const question = evt.detail.target.getAttribute('confirm-with-sweet-alert');

  // 3. Prevent the default behavior (this will prevent the request from being issued)
  evt.preventDefault();

  // 4. Show the sweet alert
  swal({
    title: "Are you sure?",
    text: question || "Are you sure you want to continue?",
    icon: "warning",
    buttons: true,
    dangerMode: true,
  }).then((confirmed) => {
    if (confirmed) {
      // 5. If the user confirms, we can manually issue the request
      evt.detail.issueRequest(true); // true to skip the built-in window.confirm()
    }
  });
});
#詳細

#イベント - htmx:historyCacheError

このイベントは、キャッシュを localStorage に保存する試行が失敗したときにトリガーされます。

#詳細

#イベント - htmx:historyCacheMiss

このイベントは、履歴を復元するときにキャッシュミスが発生した場合にトリガーされます。

#詳細

#イベント - htmx:historyCacheMissError

このイベントは、キャッシュミスが発生し、復元するコンテンツのレスポンスがサーバーから取得されたが、レスポンスがエラーの場合（例: 404）にトリガーされます。

#詳細

#イベント - htmx:historyCacheMissLoad

このイベントは、キャッシュミスが発生し、復元するコンテンツのレスポンスがサーバーから正常に取得された場合にトリガーされます。

#詳細

#イベント - htmx:historyRestore

このイベントは、htmxが履歴復元アクションを処理するときにトリガーされます。

#詳細

#イベント - htmx:beforeHistorySave

このイベントは、コンテンツが履歴APIに保存される前にトリガーされます。

#詳細
#詳細

#イベント - htmx:load

このイベントは、htmxによって新しいノードがDOMにロードされたときにトリガーされます。

#詳細

#イベント - htmx:noSSESourceError

このイベントは、要素のトリガーがSSEイベントを参照しているが、親のSSEソースが定義されていない場合にトリガーされます。

#詳細

#イベント - htmx:oobAfterSwap

このイベントは、帯域外スワップの一部としてトリガーされ、after swap eventと同じように動作します。

#詳細

#イベント - htmx:oobBeforeSwap

このイベントは、帯域外スワップの一部としてトリガーされ、before swap eventと同じように動作します。

#詳細

#イベント - htmx:oobErrorNoTarget

このイベントは、帯域外スワップで、対応する要素がDOM内に存在しない場合にトリガーされます。

#詳細

#イベント - htmx:onLoadError

このイベントは、AJAX呼び出しのload処理中にエラーが発生した場合にトリガーされます。

#詳細

#イベント - htmx:prompt

このイベントは、hx-prompt属性によってユーザーにプロンプトが表示された後にトリガーされます。このイベントがキャンセルされた場合、AJAXリクエストは発生しません。

#詳細

#イベント - htmx:beforeHistoryUpdate

このイベントは、履歴の更新が実行される前にトリガーされます。履歴の更新に使用されるpathまたはtypeを変更するために使用できます。

#詳細

#イベント - htmx:pushedIntoHistory

このイベントは、URLが履歴にプッシュされた後にトリガーされます。

#詳細

#イベント - htmx:replacedInHistory

このイベントは、URLが履歴内で置換された後にトリガーされます。

#詳細

#イベント - htmx:responseError

このイベントは、HTTPエラーレスポンスが発生した場合にトリガーされます。

#詳細

#イベント - htmx:sendError

このイベントは、ネットワークエラーによりHTTPリクエストが発生しなかった場合にトリガーされます。

#詳細

#イベント - htmx:sseError

このイベントは、SSEソースでエラーが発生した場合にトリガーされます。

#詳細

#イベント - htmx:swapError

このイベントは、スワップフェーズ中にエラーが発生した場合にトリガーされます。

#詳細

#イベント - htmx:targetError

このイベントは、hx-target属性に不正なセレクターが使用された場合（例：前に#がない要素ID）にトリガーされます。

#詳細

#イベント - htmx:timeout

このイベントは、リクエストタイムアウトが発生した場合にトリガーされます。これは、XMLHttpRequestの一般的なtimeoutイベントをラップします。

タイムアウト時間は、htmx.config.timeoutを使用するか、hx-requestを使用して要素ごとに設定できます。

#詳細

#イベント - htmx:trigger

このイベントは、AJAXリクエストが指定されていない場合でも、AJAXリクエストが発生するたびにトリガーされます。これは主に、hx-triggerがクライアントサイドスクリプトを実行できるようにすることを目的としています。AJAXリクエストには、htmx:beforeRequestやhtmx:afterRequestなど、より細かいイベントが用意されています。

#詳細

#イベント - htmx:validateUrl

このイベントは、リクエストが送信される前にトリガーされ、htmxがリクエストするURLを検証できます。イベントでpreventDefault()が呼び出された場合、リクエストは送信されません。

document.body.addEventListener('htmx:validateUrl', function (evt) {
  // only allow requests to the current server as well as myserver.com
  if (!evt.detail.sameHost && evt.detail.url.hostname !== "myserver.com") {
    evt.preventDefault();
  }
});
#詳細

#イベント - htmx:validation:validate

このイベントは、要素が検証される前にトリガーされます。カスタム検証ルールを実装するために、elt.setCustomValidity()メソッドで使用できます。

<form hx-post="/test">
  <input _="on htmx:validation:validate
               if my.value != 'foo'
                  call me.setCustomValidity('Please enter the value foo')
               else
                  call me.setCustomValidity('')"
         name="example">
</form>
#詳細

#イベント - htmx:validation:failed

このイベントは、要素の検証に失敗した場合にトリガーされます。

#詳細

#イベント - htmx:validation:halted

このイベントは、検証エラーによりリクエストが停止した場合にトリガーされます。

#詳細

#イベント - htmx:xhr:abort

このイベントは、ajaxリクエストが中止された場合にトリガーされます

#詳細

#イベント - htmx:xhr:loadstart

このイベントは、ajaxリクエストが開始されたときにトリガーされます

#詳細

#イベント - htmx:xhr:loadend

このイベントは、ajaxリクエストが完了したときにトリガーされます

#詳細

#イベント - htmx:xhr:progress

このイベントは、プログレスをサポートするajaxリクエストが実行中の場合に定期的にトリガーされます

#詳細