DOMContentLoaded结束标签是否总是必须在文档的末尾?

Question

有没有办法让JavaScript代码工作，而不必将我的代码包含在DOMContentLoaded的结束标记中。下面的第一个示例不起作用，因为 DOMContentLoaded 的结束标记在代码之前。

我担心我这样做的方式是错误的，因为一旦我的代码直观地增长到几百行，将所有这些代码都放在这个函数中感觉不对？有没有更有效的方法，我不必将所有代码都保留在这样的函数中，但仍然允许页面加载，然后再继续使用随附的代码，据我所知，这是 DOMContentLoaded 的目的？

我已经尝试了多种类型的JavaScript查询和事件侦听器，但除非所有内容都包含在DOMContentLoaded中，否则它仍然不起作用。

// **Example 1 - this code works after DOMContentLoaded**
document.addEventListener('DOMContentLoaded', function() {
})
// **the below code does not run**
document.querySelector("button").onclick = count;
let counter = 0;
function count() {
counter++;
document.querySelector("#counter").innerHTML = counter;
}

// example 2 - this code work
document.addEventListener('DOMContentLoaded', function() {
document.querySelector("button").onclick = count;
let counter = 0;
function count() {
counter++;
document.querySelector("#counter").innerHTML = counter;
}
// **If my code was large I feel that this cannot be a very efficient** 
// **way to have put it all within the DOMContentLoaded closing tag**
})   // **DOMContentLoaded closing tag**

Answer 1

我现在明白了，需要在 DOMContentLoaded 函数中的代码部分是对其他函数的调用，这些函数依赖于从网页中采取的初始操作，这需要完全加载。

我也明白其他JavaScript可以运行并显示给用户，而无需函数或函数调用在Dom函数中。例如 alert((，因为它不依赖于事先加载的 HTML 页面中的元素。

谢谢詹金斯和哈姆斯的帮助。