0

我正在设置一个非常简单的页面来从 DOMContentLoaded 事件的数组中填充下拉列表，但是在我的环境中（VS 代码 + 实时服务器扩展），我收到了一个错误，因为此时整个 body 对象不存在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>

4

1 回答 1

2

这里：

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

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

表达式 likesomething(somethingElse)是函数调用。在所有情况下都会立即对其进行评估。

第一种形式：

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

是正确的。围绕处理程序调用创建的函数表达式不是函数调用；它只是对该匿名函数的引用。这将为“就绪”( DOMContentLoaded) 事件正确创建事件处理程序。

于 2018-06-30T23:35:14.493 回答