事件 - htmx:beforeCleanupElement

当 HTMX 要从页面中移除一个元素（如替换或清空时），在真正移除之前，触发该事件，让你有机会做清理工作。

常见使用场景

• 元素被 hx-swap="outerHTML" 替换前

• 元素即将从 DOM 中被删除时

• 想在元素移除前解绑你自己附加的自定义行为（动画、事件、资源）

事件参数

• detail.elt - 即将被清理的元素

示例代码

<div id="alert-box" hx-get="/new-alert" hx-swap="outerHTML" hx-trigger="click">
  <p>提示：点击我会加载新的提示框，并替换这个区域。</p>
</div>

<script>
  document.body.addEventListener("htmx:beforeCleanupElement", function (evt) {
    const el = evt.target;
    console.log("准备移除元素:", el);

    // 假设绑定了一些事件，现在手动清理
    if (el.id === "alert-box") {
      console.log("清理 alert-box 资源或事件...");
      // 示例：移除定时器、解绑自定义事件等
    }
  });
</script>

• 页面上有个 #alert-box 元素，它有 hx-get 和 hx-swap="outerHTML"。

• 当用户点击它时，会发起请求，HTMX 收到响应后会替换这个元素（即将其移除并用新内容替代）。

• 在元素真正被删除之前，HTMX 触发 htmx:beforeCleanupElement 事件。

• 你可以通过监听这个事件，在移除前执行逻辑。

补充说明

• 该事件是 冒泡的，你可以监听 document.body 或更上层容器。

• 使用场景类似于 Vue 的 beforeUnmount、React 的 useEffect cleanup。

• 常见于带有副作用的组件，如：

  • 第三方图表（Chart.js）

  • 定时器 / 动画帧

  • WebSocket 连接

  • 外部库初始化（如 jQuery UI）