關于readystatechange 事件也是常用事件之一，為了提高用戶的交互體，特別是在H5及移動端我們用得比較多，所以在此通過學習記錄向大做一個詳細介紹，希望對前端開發人員有所幫助。
? ? ? ?IE為 DOM文檔中的某些部分提供了 readystatechange 事件。這個事件的目的是提供與文檔或 元素的加載狀態有關的信息，但這個事件的行為有時候也很難預料。支持 readystatechange 事件的 每個對象都有一個 readyState 屬性，可能包含下列 5個值中的一個。
? ? ? ?uninitialized（未初始化）：對象存在但尚未初始化。?
? ? ? ?loading（正在加載）：對象正在加載數據。
? ? ? ?loaded（加載完畢）：對象加載數據完成。
? ? ? ?interactive（交互）：可以操作對象了，但還沒有完全加載。
? ? ? ?complete（完成）：對象已經加載完畢。
? ? ? ?這些狀態看起來很直觀，但并非所有對象都會經歷 readyState 的這幾個階段。換句話說，如果某 個階段不適用某個對象，則該對象完全可能跳過該階段；并沒有規定哪個階段適用于哪個對象。顯然， 這意味著 readystatechange 事件經常會少于 4次，而 readyState 屬性的值也不總是連續的。
? ? ? ?對于 document 而言，值為"interactive"的 readyState 會在與 DOMContentLoaded 大致相 同的時刻觸發 readystatechange 事件。此時，DOM樹已經加載完畢，可以安全地操作它了，因此就會進入交互（interactive）階段。但與此同時，圖像及其他外部文件不一定可用。下面來看一段處理 readystatechange 事件的代碼。?

EventUtil.addHandler(document, "readystatechange", function(event){
? ? ? ? if (document.readyState == "interactive"){?
? ? ? ? ? ? ? alert("Content loaded");?
? ? ? ?}?
? ? ? ?});?

這個事件的 event 對象不會提供任何信息，也沒有目標對象。?
? ? ? ?在與 load 事件一起使用時，無法預測兩個事件觸發的先后順序。在包含較多或較大的外部資源的 頁面中，會在 load 事件觸發之前先進入交互階段；而在包含較少或較小的外部資源的頁面中，則很難 說 readystatechange 事件會發生在 load 事件前面。?
? ? ? ?讓問題變得更復雜的是，交互階段可能會早于也可能會晚于完成階段出現，無法確保順序。在包含 較多外部資源的頁面中，交互階段更有可能早于完成階段出現；而在頁面中包含較少外部資源的情況下， 完成階段先于交互階段出現的可能性更大。因此，為了盡可能搶到先機，有必要同時檢測交互和完成階 段，如下面的例子所示。?

EventUtil.addHandler(document, "readystatechange", function(event){
? ? ? ? if (document.readyState == "interactive" || document.readyState == "complete"){?
? ? ? ? ? ? ? EventUtil.removeHandler(document, "readystatechange", arguments.callee);
? ? ? ? ? ? ? ?alert("Content loaded");?
? ? ? ?}?
? ? ? ?});?

對于上面的代碼來說，當 readystatechange 事件觸發時，會檢測 document.readyState 的值， 看當前是否已經進入交互階段或完成階段。如果是，則移除相應的事件處理程序以免在其他階段再執行。 注意，由于事件處理程序使用的是匿名函數，因此這里使用了 arguments.callee 來引用該函數。然 后，會顯示一個警告框，說明內容已經加載完畢。這樣編寫代碼可以達到與使用 DOMContentLoaded 十分相近的效果。
? ? ? ? 支持 readystatechange 事件的瀏覽器有 IE、Firfox 4+和 Opera。?
? ? ? ?雖然使用 readystatechange 可以十分近似地模擬 DOMContentLoaded 事件， 但它們本質上還是不同的。在不同頁面中，load 事件與 readystatechange 事件并 不能保證以相同的順序觸發。?
? ? ? ?另外，


? ? ? ?

This example loads a JavaScript file and a CSS file dynamically. The script code works in IE and Opera while the CSS code works only in IE.

? ? ? ?同樣，重要的是要一并檢測 readyState 的兩個狀態，并在調用了一次事件處理程序后就將其移除。
? ? ? ?。 ? ? ??
? 本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣大技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡http://m.51yjwy.com/如轉載請注明出處!