如何在没有框架的情况下检测 Javascript 中的 DOM Ready 事件？

无需框架即可进行 Javascript DOM 事件检测

在 Javascript 中，开发人员经常依赖 Prototype 或 jQuery 等框架将函数附加到 window.onload 事件来执行某些任务。不过，还有其他方法可以在不使用这些框架的情况下实现此目的。

Javascript 中的 document 对象有一个 readState 属性，用于指示页面的加载阶段，类似于 AJAX 请求的 readState 属性。 ReadyState 属性可以有以下值：

• loading - 页面仍在加载，DOM 元素尚不可用。
• interactive - 页面已加载，DOM 元素大部分可用已准备好进行交互，但图像和其他资源可能仍在加载。
• 完整 - 页面已完全加载，所有 DOM 元素均可用。

检测 DOM 何时准备就绪，您可以使用以下代码：

<code class="javascript">function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}</code>

此代码检查页面是否已完全加载（readyState 为“complete”）并立即执行 fireOnReady 函数。否则，它将回调附加到 DOMContentLoaded 事件，该事件在 DOM 准备就绪时触发，并执行 fireOnReady 函数。

另一个选项是使用 jQuery 未记录的 isReady 属性：

<code class="javascript">if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}</code>

但是，此属性没有记录在案，并且可能会在 jQuery 的未来版本中删除。

最终，侦听 DOMContentLoaded 事件是检测 DOM 在现代浏览器中何时准备就绪的最可靠方法。

以上是如何在没有框架的情况下检测 Javascript 中的 DOM Ready 事件？的详细内容。更多信息请关注PHP中文网其他相关文章！