两个带有 window.onload = function() 的 JS 文件存在冲突

Question

我有这个脚本来打开和关闭我的侧边菜单，它有一个 HTML 内置事件处理程序。然后我读到内置事件处理程序已经过时了。所以我把它改造成纯JS。

我制作了自己的事件处理程序，它应该可以工作，但它返回了一个错误：未捕获的类型错误：无法将属性“onclick”设置为空。

然后我读到这里也许我应该添加到 JS：

window.onload = function(){ 
    // your code 
};

我添加了该功能并且它起作用了。

但是当我为手风琴添加另一个具有相同功能的 JS 后，它突然停止工作window.onload，因为它不想在没有<script>该功能的情况下工作或不在<head>.

我是 JS 新手。你能帮助我吗？是否可以让两个 js 都在没有 js 的情况下工作window.onload并将它们保留在里面<head>？

Answer 1

onload正如您所注意到的，只能保存一个事件处理程序。当您分配新的时，任何现有的都会被覆盖。

相反，使用 use addEventListener()，正如名称所示，它会在调用时添加一个侦听器。

所以而不是

window.onload = function () { ... };

做就是了

window.addEventListener('load', function() { ... });

请注意，该load事件可能不是您的情况下的最佳生命周期挂钩。load之后出现DOMContentLoaded，并load等待所有外部资源（如图像、样式表、字体等）加载完毕。

更多时候，您真正想要的是确保等到所有 DOM 元素都已轻松解析并可用。为此，DOM API 提供了以下DOMContentLoaded事件：

window.addEventListener('DOMContentLoaded', function() { ... });

除了像这样与听众合作之外，您还有其他两个选择：

将<script>标签放在结束</body>标签之前：
```
<script src="path/to/my.js"></script>
```
Run Code Online (Sandbox Code Playgroud)
或者使用defer您的属性<script>，它允许保留<script>在<head>：

<head>
  ...
  <script src="path/to/my.js" defer></script>
  ...
</head>