事件 - htmx:xhr:loadstart

当 ajax 请求开始时触发此事件，需要注意的是，通过 fetch 发送的 ajax 请求开始加载时并不会触发该事件。必须是 hx-get 等由 htmx 发送的 ajax 请求才会生效。

事件参数

detail.elt - 触发请求的元素

示例代码

<body>
    <button onclick="fetchData()">Test1</button>
    <button hx-get="/test">Test2</button>
</body>
<script>
    function fetchData() {
        fetch('/test')
            .then(response => response.text())
            .then(data => {
                console.log(data);
                alert(data);
            })
            .catch(error => console.error('Error:', error));
    }
    document.body.addEventListener("htmx:xhr:loadstart", function(event) {
        console.log("XHR Load Start:", event.detail.elt);
    });
</script>

例如以上代码中，Test1 按钮请求开始时控制台不会打印出 XHR Load Start 的字符串，只有 Test2 按钮的代码才会在控制台打印出 XHR Load Start 的字符串。