事件系统

<!-- 点击（默认）-->
<button hx-get="/data" hx-trigger="click">点击</button>

<!-- 加载时 -->
<div hx-get="/data" hx-trigger="load"></div>

<!-- 输入时 -->
<input hx-get="/search" hx-trigger="input">

<!-- 变化时 -->
<select hx-get="/filter" hx-trigger="change">

<!-- 提交时 -->
<form hx-post="/submit" hx-trigger="submit">

<!-- 延迟 -->
<input hx-get="/search" hx-trigger="input delay:500ms">

<!-- 防抖 -->
<input hx-get="/search" hx-trigger="input throttle:1s">

<!-- 只触发一次 -->
<div hx-get="/init" hx-trigger="load once"></div>

<!-- 条件 -->
<button hx-get="/data" hx-trigger="click[confirm('确定?')]">
  删除
</button>

<!-- 来自其他元素 -->
<div hx-get="/data" hx-trigger="click from:#btn"></div>
<button id="btn">触发</button>

// 监听请求完成
document.body.addEventListener('htmx:afterRequest', function(evt) {
  console.log('请求完成', evt.detail.pathInfo.requestPath);
});

// 监听错误
document.body.addEventListener('htmx:responseError', function(evt) {
  console.error('请求失败', evt.detail.error);
});

// 使用 hx-on 内联监听
<div hx-get="/data" 
     hx-on:htmx:after-request="console.log('完成')">
</div>