HTMX 的 hx-on 事件监听器（如 hx-on::config-request）支持直接使用 event 全局变量，无需箭头函数或额外声明；关键在于使用双冒号 :: 语法并确保 HTMX 版本 ≥ 1.9.0。
htmx 的 `hx-on` 事件监听器（如 `hx-on::config-request`）支持直接使用 `event` 全局变量，无需箭头函数或额外声明；关键在于使用双冒号 `::` 语法并确保 htmx 版本 ≥ 1.9.0。
HTMX 的 hx-on 属性用于在特定生命周期事件（如请求前、响应后）执行 JavaScript 逻辑。但需注意：它不支持任意函数表达式（如箭头函数、匿名函数或自定义方法调用），而是采用一种轻量级的“内联表达式求值”机制——其中 event 是预置的全局上下文变量，可直接引用。
✅ 正确写法（推荐，简洁可靠）：
<button hx-get="/api/things" hx-on::config-request="console.log('? ', event)" hx-target="#target">
Click Me!
</button>
<p id="target">...</p>
⚠️ 关键要点解析：
- 必须使用 :: 而非 :：hx-on::config-request 是 HTMX 1.9.0+ 引入的简写语法，等价于 hx-on:htmx:configRequest，它启用完整的事件对象注入能力；旧版 hx-on:config-request（单冒号）仅触发简单脚本，不暴露 event。
- event 是隐式可用变量：在 hx-on::xxx 表达式中，HTMX 自动将当前事件对象绑定为 event，无需 e => ... 或 function(e) {...} 包裹。
- 不支持函数字面量：hx-on::config-request="() => console.log(event)" 或 hx-on::config-request="myHandler" 均会失败——HTMX 不执行 eval() 或 Function() 构造，仅安全求值简单表达式。
? 进阶用法示例（修改请求配置）：
<button hx-get="/api/things" hx-on::config-request="
event.detail.elt.setAttribute('hx-headers', JSON.stringify({ 'X-Custom': 'true' }));
event.detail.elt.setAttribute('hx-params', 'exclude: #filter-input');
" hx-target="#target">
Load with custom headers & params
</button>
此处利用 event.detail.elt（触发元素）动态设置 HTMX 属性，实现运行时请求定制。
? 注意事项：
- 确保引入 HTMX v1.9.0 或更高版本（旧版本不支持 :: 语法及 event 注入）；
- 所有内联 JS 表达式应在单行内完成，避免换行或分号分割（HTMX 按空格/分号切分指令）；
- 如需复杂逻辑，建议改用 htmx:configRequest 原生事件监听：
document.addEventListener('htmx:configRequest', function(evt) { console.log('Full event:', evt); evt.detail.headers['X-Trace'] = 'custom'; });
总结：HTMX 的 hx-on:: 语法是专为轻量交互设计的安全快捷方式——拥抱其约定（直接用 event、用 ::、写单行表达式），而非尝试绕过限制注入函数，才能高效、可靠地完成请求前配置。
