内容

事件与日志

Htmx 具有广泛的事件机制，同时也兼作日志系统。

如果你想注册一个给定的 htmx 事件，你可以使用

document.body.addEventListener('htmx:load', function(evt) {
    myJavascriptLib.init(evt.detail.elt);
});

或者，如果你愿意，你可以使用以下 htmx 帮助程序：

htmx.on("htmx:load", function(evt) {
    myJavascriptLib.init(evt.detail.elt);
});

每次元素通过 htmx 加载到 DOM 中时都会触发该 htmx:load 事件，实际上相当于普通 load 事件。

htmx 事件的一些常见用途包括：

使用事件初始化第三方库

使用 htmx:load 事件来初始化内容非常常见，因此 htmx 提供了一个辅助函数：

htmx.onLoad(function(target) {
    myJavascriptLib.init(target);
});

这与第一个例子的作用相同，但更简洁一些。

使用事件配置请求

你可以处理该 htmx:configRequest 事件以便在发出 AJAX 请求之前对其进行修改：

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

这里我们在发送请求之前添加一个参数和标头。

使用事件修改交换行为

你可以处理该 htmx:beforeSwap 事件以修改 htmx 的交换行为：

document.body.addEventListener('htmx:beforeSwap', function(evt) {
    if(evt.detail.xhr.status === 404){
        // alert the user when a 404 occurs (maybe use a nicer mechanism than alert())
        alert("Error: Could Not Find Resource");
    } else if(evt.detail.xhr.status === 422){
        // allow 422 responses to swap as we are using this as a signal that
        // a form was submitted with bad data and want to rerender with the
        // errors
        //
        // set isError to false to avoid error logging in console
        evt.detail.shouldSwap = true;
        evt.detail.isError = false;
    } else if(evt.detail.xhr.status === 418){
        // if the response code 418 (I'm a teapot) is returned, retarget the
        // content of the response to the element with the id `teapot`
        evt.detail.shouldSwap = true;
        evt.detail.target = htmx.find("#teapot");
    }
});

这里我们处理一些400 级错误响应代码 ，这些代码通常不会在 htmx 中进行交换。

事件命名

请注意，所有事件都以两个不同的名称触发

  • 驼峰式命名法
  • 烤肉串案例 例如，你可以监听 htmx:afterSwap 或 htmx:after-swap 。这有利于与其他库的互操作性。 例如，Alpine.js 要求使用短横线大小写。

日志记录

如果你将记录器设置为 htmx.logger ，则每个事件都将被记录。这对于故障排除非常有用：

htmx.logger = function(elt, event, data) {
    if(console) {
        console.log(event, elt, data);
    }
}