事件

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

此事件在 AJAX 请求完成时触发，无论是在成功请求的情况下（尽管可能返回了远程错误代码，例如 404）还是在网络错误情况下。此事件可以与 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

此事件在发生 视图过渡 包装的交换之前触发。如果事件被取消，则不会发生视图过渡，而是会发生正常的交换逻辑。

#详情

#事件 - 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 对象包含一个函数 evt.detail.issueRequest(skipConfirmation=false)，该函数可用于在稍后发出实际的 AJAX 请求。结合这两个功能，您可以创建一个异步确认对话框。

这是一个基本示例，它显示了 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

此事件作为 带外交换 的一部分触发，其行为与 交换后事件 相同

#详情

#事件 - htmx:oobBeforeSwap

此事件在 带外交换 过程中触发，其行为与 交换前事件 相同。

#详情

#事件 - 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 请求正在进行时，会定期触发此事件。

#详情