Javascript DOMContentLoaded结束标记是否必须始终位于文档末尾？

有没有一种方法可以让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**

---

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

我还了解到，可以运行其他JavaScript并向用户显示，而无需在Dom函数中执行函数或函数调用。例如alert（），因为它不依赖于预先加载的HTML页面中的元素

---

感谢您的帮助Jenkins和Hamms。

只需将其分解为更小的子函数，并从contentLoaded handler中调用它们。它们出现的顺序并不重要，调用的顺序是。请注意，必须进入内容加载事件处理程序的唯一内容是依赖于加载的内容的内容；因此，您可以在事件处理程序外部声明

count

和

counter

，然后事件处理程序所要做的就是

按钮。onclick=count

行谢谢威尔·詹金斯和哈姆斯，我现在完全理解了。