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

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

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

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

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


? ? ? ?

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.

? ? ? ?同樣，重要的是要一并檢測(cè) readyState 的兩個(gè)狀態(tài)，并在調(diào)用了一次事件處理程序后就將其移除。
? ? ? ?。 ? ? ??
? 本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://syshcw.cn/如轉(zhuǎn)載請(qǐng)注明出處!