Question

我正在设置一个非常简单的页面，以从DOMContentLoaded事件上的数组填充下拉列表，但是在我的环境（VS代码+实时服务器扩展）中，由于整个主体对象不存在，我遇到了错误在DOMContentLoaded的时候，这对我来说很奇怪。

我在网上阅读了一些站点，但它们确实表明，除了较旧的浏览器支持之外，DOMContentedLoaded和readyState交互式是可互换的。 https://caniuse.com/#search=DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

因此我进行了探索，似乎如果我在浏览器中调用一个匿名函数（在其中调用了相同的函数），它将处于“交互”状态，但是如果我直接调用该函数，它将处于就绪状态“正在加载”。现在在codpen.io和Stacks Snippets中，它甚至可以正常显示，但是在我的本地环境中，它会出错，并且最终就绪状态是否应该是交互式的？

我链接的文档通过使用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>

Answer 1

这里：

document.addEventListener("DOMContentLoaded", DomLoaded("typelist"));

您正在调用 DomLoaded()函数，并将（undefined）返回值传递给addEventListener()。这将在触发“就绪”事件之前发生，并且您得到的错误将归因于目标<select>元素尚未在DOM中。

像something(somethingElse)这样的表达式是函数 call 。在所有情况下都将立即对其进行评估。

第一种形式：

document.addEventListener("DOMContentLoaded", function() { DomLoaded("typelist"); });

是正确的。在处理程序调用周围创建的函数表达式不是函数调用；它只是对该匿名函数的引用。这样可以为“就绪”（DOMContentLoaded）事件正确创建事件处理程序。

ReadyState交互式vs DOMContentLoaded

1 个答案: