为什么在DOMContentLoaded中设置数据对象不保留在DOM中？

2024-05-17 • 问答

在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>

您的脚本可能只有在被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更改为interactive
窗口的DOMContentLoaded被解雇
document.readyState更改为complete
窗口的load被解雇

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

为什么在DOMContentLoaded中设置数据对象不保留在DOM中？

LLY941020 回答：为什么在DOMContentLoaded中设置数据对象不保留在DOM中？

大家都在问