如何在沒有框架的情況下偵測 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中文網其他相關文章！