加载了外部 js 文件，但代码不起作用

【问题标题】：external js file loaded but the code don't working加载了外部 js 文件，但代码不起作用
【发布时间】：2024-01-02 14:30:01
【问题描述】：

当我在 html 文件内部编写 js 代码时，它运行良好。这里是html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./cs.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
   <div id="root" onload="App">
   

</div>
<script src="js/App.js" type="module" />
</body>
</html>

这里是 App.js 文件

import Insert from './Insert.js';
function App(){
  document.getElementById("root").insertAdjacentHTML("afterbegin",'<h1>hello Javascript</h1>');
};

【问题讨论】：

调用函数需要括号：onload="App()"
另外，onload 不会在 DIV 上触发。将其移至<body>
您好 Atiye Naderi，欢迎来到 Stack Overflow。您是否尝试过搜索问题？

标签： javascript module external-js

【解决方案1】：

onload 不是 div 元素支持的属性，一般如果你使用它，你会将它应用到 body 元素，但应该避免使用 addEventListener
onload 属性的值是 JS 函数的主体。仅仅提及另一个函数的名称并没有做任何事情。如果你想调用一个函数，你通常会在名字后面加上()。
type="module" 加载一个 JS 模块，这（除其他外）意味着外部范围是 module 而不是全局范围，因此无论如何您都无法访问 App。再次使用addEventListener。
script 元素的</script> 结束标记是强制性的，您省略了它。（因为它是文档中的最后一件事，它可能不会破坏任何内容，但您正在为未来的问题敞开心扉）。

【讨论】：

非常感谢。你能告诉我在这种情况下我应该为 addEventListener 使用什么“事件”吗？
load 大概。