我设置了一个非常简单的页面来从DOMContentLoaded Event的数组中填充下拉列表,但是在我的环境(VS代码+ live Server扩展)中,由于整个主体对象此刻不存在,我遇到了错误对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>
最佳答案
这里:
document.addEventListener("DOMContentLoaded", DomLoaded("typelist"));
您正在调用
DomLoaded()
函数并将(undefined
)返回值传递给addEventListener()
。这将在触发“就绪”事件之前发生,并且您收到的错误将归因于目标<select>
元素尚未在DOM中。像
something(somethingElse)
这样的表达式是一个函数调用。在所有情况下都将立即对其进行评估。第一种形式:
document.addEventListener("DOMContentLoaded", function() { DomLoaded("typelist"); });
是正确的。在对处理程序的调用周围创建的函数表达式不是函数调用;它是函数调用。它只是对该匿名函数的引用。这将为“ ready”(
DOMContentLoaded
)事件正确创建一个事件处理程序。