我正在设置一个非常简单的页面来填充 DOMContentLoaded Event 上的数组中的下拉列表，但是在我的环境中(VS 代码 + 实时服务器扩展(，我收到一个错误，因为在 DOMContentLoaded 的那一刻整个正文对象不存在，这对我来说很奇怪。
我在网上阅读了一些网站，但它们确实表明，除了旧的浏览器支持之外，DOMContentedLoaded和readyState的交互式是可以互换的。 https://caniuse.com/#search=DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
所以我探索了它，似乎如果我在浏览器中调用一个匿名函数(其中使用相同的函数调用(，它将具有"交互式"的就绪状态，但如果我直接调用该函数，它将具有"加载"的就绪状态。现在在 codpen.io 和 Stacks 片段中，它甚至渲染得很好，但在我的本地环境中它会出错，最终无论如何，就绪状态不应该是交互式的吗？
我链接的文档谈到了使用 document.onreadychange 更广泛的支持，我想对于我的具体情况，我会走这条路，但我想问一下是否有其他人遇到过这个问题？ 我使用的是Chrome版本67.0.3396.99(官方版本((64位(，在Chrome，Firefox和Opera上进行了测试，结果相同。
function DomLoaded(element) {
console.log("Looking for " +element + " | current document state:" + document.readyState);
var typelist = document.getElementById(element);
listofTypes.forEach(function(currentvalue, index) {
var option = document.createElement("option");
option.text = currentvalue;
typelist.add(option);
});
}
var listofTypes = ["accounting", "airport", "amusement_park", "aquarium"];
document.addEventListener("DOMContentLoaded", function() {
DomLoaded("typelistanonfunc");});
document.addEventListener("DOMContentLoaded", DomLoaded("typelist"));<html>
<head>
<title>Document Load</title>
</head>
<body>
<h1 id="header1">Test 1</h1>
<select id="typelist" style="max-width: 90%;"></select>
<select id="typelistanonfunc" style="max-width: 90%;"></select>
</body>
</html>在这里：
document.addEventListener("DOMContentLoaded", DomLoaded("typelist"));
您正在调用DomLoaded()函数并将 (undefined( 返回值传递给addEventListener()。这将在触发"ready"事件之前发生，并且您得到的错误是由于目标<select>元素尚未在 DOM 中。
像something(somethingElse)这样的表达式是函数调用。 在所有情况下都会立即对其进行评估。
第一种形式：
document.addEventListener("DOMContentLoaded", function() { DomLoaded("typelist"); });
是正确的。围绕对处理程序的调用创建的函数表达式不是函数调用;它只是对该匿名函数的引用。这将正确地为"ready"(DOMContentLoaded(事件创建一个事件处理程序。