摘要：因為該事件屬于鼠標事件，所以其事件對象中包含與光標位置有關的所有屬性。事件和屬性該事件在頁面顯示時觸發(fā)，雖然這個事件的目標是，但是必須將其事件處理程序添加到。事件該事件以便在的參數(shù)列表及中號后面的所有字符串發(fā)生變化時通知開發(fā)人員。

該事件用以表示何時應該顯示上下文菜單，以便開發(fā)者取消默認的上下文菜單，轉而提供自定義的菜單。

因為該事件屬于鼠標事件，所以其事件對象中包含與光標位置有關的所有屬性。如：

    

        
item1
        
item2
        
item3
    
    

chrome現(xiàn)在支持該事件，部分瀏覽器都支持。

該事件是為了讓開發(fā)者有可能在頁面卸載前阻止這一操作。event.returnValue設置的值是顯示給用戶的字符串（對于IE以及Firefox而言），同時作為函數(shù)的值返回（對safari和chrome而言），如：

window.addEventListener("beforeunload", function () {
    var message = "do you realy want to leave?";
    event.returnValue = message;
    return message;
}); //當離開時會顯示信息和兩個按鈕；當刷新時也會提示；

該事件在形成完整的DOM樹之后就會觸發(fā)，不理會圖像、js文件、css文件等其他資源下載完畢。

IE提供的事件，支持該事件的每個對象都有一個readyState屬性，可能包含下列5個值中的一個：

uninitialized（未初始化）：對象存在但尚未初始化；

loading（正在加載）：對象正在加載數(shù)據(jù)；

loaded（加載完畢）：對象加載數(shù)據(jù)完成；

interactive（交互）：可以操作對象，但還沒有完全加載；

complete（完成）：對象已經(jīng)加載完畢；

并非每個對象都會經(jīng)歷這些階段；值為interactive的readyState會在與DOMContentLoaded大致相同的時刻觸發(fā)readystatechange事件。事件的event對象不會提供任何信息。

switch (document.readyState) {
    case "loading":
        // 正在加載
        console.log("loading");
    case "interactive":
        // 交互階段 可以操作對象了
        var span = document.createElement("span");
        span.textContent = "A  element.";
        document.body.appendChild(span);
        console.log("The document has finished loading. We can now access the DOM elements.")
    case "complete":
        // 完成階段 完全加載完畢了
        console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
        console.log("The page is fully loaded.")
        break;
}

如：

document.addEventListener("readystatechange", function () {
    if (document.readyState == "loading") {
        var newP = document.createElement("p");
        newP.appendChild(document.createTextNode("data1"));
        document.body.appendChild(newP);
    }
    if (document.readyState == "interactive") {
        var newP = document.createElement("p");
        newP.appendChild(document.createTextNode("data2"));
        document.body.appendChild(newP);
    }
});
//上述代碼的第一段并沒有在document.body下創(chuàng)建一個新的p，因為readyState為loading的時候并不能操作對象；

又如：

document.addEventListener("readystatechange", function () {
    if (document.readyState == "loading") {
        var newP = document.createElement("p");
        newP.appendChild(document.createTextNode("data1"));
        document.body.appendChild(newP);

        console.log(document.styleSheets[0].cssRules[0].cssText); //無效，因為loading的時候，對象沒有加載完全加載完畢（complete）
    }
    if (document.readyState == "interactive") {
        var newP = document.createElement("p");
        newP.appendChild(document.createTextNode("data2"));
        document.body.appendChild(newP);

        console.log(document.styleSheets[0].cssRules[0].cssText); //可能有效，外部資源少的情況下完成階段很可能在交互階段之前出現(xiàn)；而在外部資源較多的情況下完成階段很可能在交互階段之后出現(xiàn)。
    }
    
});
//上述代碼的第一段并沒有在document.body下創(chuàng)建一個新的p，因為readyState為loading的時候并不能操作對象；

交互階段可能早于或晚于完成階段出現(xiàn)，無法確保順序。在包含較多外部資源的頁面中，交互階段更有可能出現(xiàn)的早；在包含較少外部資源的頁面中，完成階段更有可能出現(xiàn)的早。因此，為了盡可能搶到先機，有必要同時檢測交互和完成階段，如：

document.addEventListener("readystatechange", function ready () {
    if (document.readyState == "interactive" || document.readyState == "complete") {
        document.removeEventListener("readystatechange", ready;
        console.log("Content loaded");
    }
});

見《js高級程序設計》第十三章事件類型html5事件中readystatechange事件，第二版391頁

這樣編寫的代碼，可以達到與使用DOMContentLoaded十分接近的效果。

另外，關于script元素和link元素的加載情況參考：

就緒狀態(tài)(readystatechange)事件

“往返緩存（back-forward cache或bfcache）”——可以在用戶使用瀏覽器的“前進”、“后退”按鈕時加快頁面的轉換速度。如果頁面位于bgcache中，那么再次打開該頁面時就不會觸發(fā)load事件。

該事件在頁面顯示時觸發(fā)，雖然這個事件的目標是document，但是必須將其事件處理程序添加到window。如：

window.addEventListener("pageshow", function(event) {
    console.log("pageshow:");
    console.log(event); //PageTransitionEvent
});

屬性是一個布爾值，如果頁面保存在了bfcache中，則這個屬性的值為true；否則為false。

該事件以便在URL的參數(shù)列表（及URL中“#”號后面的所有字符串）發(fā)生變化時通知開發(fā)人員。必須把這個事件的事件處理程序添加給window對象。event對象中有兩個屬性：oldURL和newURL。這兩個屬性分別保存著參數(shù)列表變化前后的完整URL：

window.addEventListener("hashchange", function () {
    console.log("Old URL:" + event.oldURL + "
New URL: " + event.newURL);
});

檢測：

如果IE8是在IE7文檔模式下運行，即使功能無效也會返回true：

var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7);