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

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

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

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

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

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