javascript - 尝试与 window.onload 一起执行两个 JavaScript 文件

Question

我有两个独立的 JavaScript 文件链接到一个 HTML 文档，当我运行它时，似乎第二个 JS 文件覆盖了第一个。我认为这与每个文件中调用的 window.onload 有关，但我不确定如何解决这个问题。

我尝试在其中一个 JS 文件上使用 window.onloadend，在另一个 JS 文件上使用 window.onload，但结果相同，window.onloadend 是唯一执行的文件。

文件1.js

function init() {
    applyFunction();
    prefillForm();
    var applyForm = document.getElementById("applyForm");
    applyForm.onsubmit = validate;
}

window.onload = init;

文件2.js

function init() {
    currentPage();
    timer();
}

window.onload = init;

Answer 1

每当您分配给 on- 属性时，您都会覆盖之前附加到该属性的任何内容，并且当事件触发时，只有最新的处理程序才会运行。使用 addEventListener 代替:

window.addEventListener('load', init);

(将其替换两个文件中的 .onload 行)

或者，如果您没有等待整个文档加载(包括图像等内容)，您可以改为监听 DOMContentLoaded，这会更快地触发。尽管并非所有资源都已下载，但 DOM 和所有元素都将被填充:

window.addEventListener('DOMContentLoaded', init);