javascript - 为什么在 DOMContentLoaded 中设置的数据对象没有保留在 DOM 中？

Question

在 DOMContenLoaded 事件处理程序内的表单节点上设置数据设置对象时，我们遇到了奇怪的行为，我创建了一个简单的 jsfiddle 来描述该问题:https://jsfiddle.net/804q13g2/

您可以看到，我在 form#me 上设置了三个不同的数据属性，一个是内联的，一个是在 DOMContentLoadad 内，一个是在 jQuery 文档就绪事件处理程序内；当您按下按钮时，数据设置将粘贴到屏幕上，您可以看到第二个数据属性 "ciao":"mondo" 丢失。

你能帮我理解为什么会发生这种情况吗？

无论如何，我已经看到在 Stack Overflow 上的片段中禁用 BabelJS/ES5 是按预期工作的!

document.addEventListener("DOMContentLoaded", function() {
  $("#me").data("ciao", "mondo");
})
$(function() {
  $("#me").data("ciao2", "mondo2");
  $("#btn").click(function() {
    var a = $(document.createElement("p")).text(JSON.stringify($("#me").data()));
    $("#banner-message").append(a);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="me" data-test="passed">
  <div id="banner-message">
    <p>Hello World</p>
    <button type="button" id="btn">Change color</button>
  </div>
</form>

Answer 1

您的脚本可能只有在 DOMContentLoaded 被触发后才有机会运行。如果您想安全起见，您应该涵盖两种可能性:

if (document.readyState === "complete") {
  // DOMContentLoaded already fired, no need to wait for it
  doStuff();
} else {
  window.addEventListener("DOMContentLoaded", doStuff);
}

如果 document.readyState 为 complete，则意味着 DOMContentLoaded 已触发(有关所有文档状态，请参阅 this)。

这就是为什么它在 jsfiddle 中也不起作用的原因。为了使其工作，您需要将脚本设置为在事件触发之前运行，如下所示:

正确的事件顺序是:

• document.readyState 更改为交互式
• 窗口的 DOMContentLoaded 被触发
• document.readyState 更改为 complete
• 窗口的加载被触发

如果您想亲自验证此订单，check this fiddle .