我目前有一个事件侦听器，用于侦听要触发的内容。我希望在尝试加载js文件之前触发该事件。现在JavaScript正在加载，然后api就准备好了。如何在加载main.js文件之前使EventListener完全完成？
<head>
<title>Default</title>
<script>document.addEventListener(apikey,function () {
console.log("ready");
});
</script>
<script src="./js/main.js"></script>
<script>console.log("js loaded")</script>
</head>
删除main.js.的脚本标记
在事件监听器函数中，创建一个脚本标记并将其添加到文档中：
你的代码应该看起来像：
<head>
<title>Default</title>
<script>
document.addEventListener(apikey, function() {
const myscript = document.createElement('script');
myscript.src = './js/main.js';
document.body.appendChild(myscript);
});
</script>
<script>
console.log("js loaded")
</script>
</head>
您可以这样做：
<head>
<link href="./js/main.js" rel="preload" as="script">
<script>
async function runScript(src) {
let script = document.createElement('script');
script.src = src;
document.head.append(script);
}
document.addEventListener(apikey, () => {
runScript('./js/main.js');
});
</script>
</head>
这种方法的优点是，无论发生什么事件，脚本都会立即开始加载。并且可以在不浪费额外时间的情况下从事件中调用它。
浏览器兼容性：预加载。