Javascript why import module which get async data doesn’t trigger DOMContentLoaded and load event

Sorry not a native English speaker.

I have a async data which get from other module to import.

when I import, DOMContentLoaded and load event won’t’ be triggered. And when I comment out import, it work

// main.js

<head>
    <script type="module">
        import test from "/js/test.js";
        console.log(test); // has data

        // can only work when comment out import
        window.addEventListener("DOMContentLoaded", () => {
            console.log("DOMContentLoaded");
        });

        // can only work when comment out import
        window.addEventListener("load", () => {
            console.log("load");
        });

        // work no matter import module or not
        $(document).ready(() => {
            console.log("ready"); 
        });
    </script>
</head>

// test.js

let test = await f();
async function f() {
    const r = await fetch("url", {
        method: "post",
        body: JSON.stringify({
            "key": "value"
        }),
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json",
        }
    })
    .then((res) => res.json())
    .then((result) => {
        return result;
    })
    return r;
}
console.log(test); // has data
export default test