深入理解DOM事件類型系列第六篇——加載事件

前面的話

　　提到加載事件，可能想到了window.onload，但實際上，加載事件是一大類事件，本文將詳細介紹加載事件

 

load

　　load事件是最常用的一個事件，當頁面完全加載后(包括所有圖像、javascript文件、CSS文件等外部資源)，就會觸發window上的load事件

　　[注意]IE8-瀏覽器不會為該事件設置srcElement屬性，而其他瀏覽器的target屬性指向document

window.onload = function(e){
    e = e || event;
    var target = e.target || e.srcElement;
    //IE8-瀏覽器返回null，其他瀏覽器返回document
    console.log(target);
}

　　load事件不僅發生在document對象，還發生在各種外部資源上面。瀏覽網頁就是一個加載各種資源的過程，圖像(image)、樣式表(style sheet)、腳本(script)、視頻(video)、音頻(audio)、Ajax請求(XMLHttpRequest)等等。這些資源和document對象、window對象、XMLHttpRequestUpload對象，都會觸發load事件

　　[注意]如果頁面從瀏覽器緩存加載，並不會觸發load事件

　　圖像和框架iframe也可以觸發load事件

　　[注意]要在指定圖像的src屬性之前先指定事件，圖像是從設置src屬性之后開始下載

var img = new Image();
img.onload = function(){
    document.body.appendChild(img);
}
img.src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg";

<iframe id="test" src="http://cnblogs.com" frameborder="0"></iframe>
<script>
test.onload = function(){
    console.log(666);
}
</script>

　　script元素也可以觸發load事件，以便開發人員確定動態加載的javascript文件是否加載完畢。與圖像不同，只有在設置了script元素的src屬性並將該元素添加到文檔后，才會開始下載javascript文件。換句話說，指定src屬性和指定事件處理程序的先后順序不重要

　　[注意]IE8-瀏覽器不支持該用法

var script = document.createElement('script');
script.onload = function(){
    console.log(666);
}
document.body.appendChild(script);
script.src="http://files.cnblogs.com/files/xiaohuochai/excanvas.js";

　　類似地，link元素可以觸發load事件，且無兼容性問題。與script類似，在未指定href屬性並將link元素添加到文檔之前也不會開始下載樣式表

var link = document.createElement('link');
link.rel="stylesheet";
link.onload = function(){
    console.log(666);
}
document.getElementsByTagName('head')[0].appendChild(link);
link.href="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/style.css";

 

error

　　load事件在加載成功時觸發，而error事件與之正相反，在加載失敗時觸發。凡是可以觸發load事件的元素，同樣可以觸發error事件

　　任何沒有通過try-catch處理的錯誤都會觸發window對象的error事件

　　error事件可以接收三個參數：錯誤消息、錯誤所在的URL和行號。多數情況下，只有錯誤消息有用，因為URL只是給出了文檔的位置，而行號所指的代碼行既可能出自嵌入的javascript代碼，也可能出自外部的文件

　　要指定onerror事件處理程序，可以使用DOM0級技術，也可以使用DOM2級事件的標准格式

//DOM0級
window.onerror = function(message,url,line){
    alert(message);
}
//DOM2級
window.addEventListener("error",function(message,url,line){
    alert(message);
});

　　瀏覽器是否顯示標准的錯誤消息，取決於onerror的返回值。如果返回值為false，則在控制台中顯示錯誤消息；如果返回值為true，則不顯示

//控制台顯示錯誤消息
window.onerror = function(message,url,line){
    alert(message);
    return false;
}
a;

//控制台不顯示錯誤消息
window.onerror = function(message,url,line){
    alert(message);
    return true;
}
a;

　　這個事件處理程序是避免瀏覽器報告錯誤的最后一道防線。理想情況下，只要可能就不應該使用它。只要能夠適當地使用try-catch語句，就不會有錯誤交給瀏覽器，也就不會觸發error事件

　　圖像也支持error事件。只要圖像的src特性中的URL不能返回可以被識別的圖像格式，就會觸發error事件。此時的error事件遵循DOM格式，會返回一個以圖像為目標的event對象

　　發生error事件時，圖像下載過程已經結束，也就是不能再重新下載了。但是，可以在error事件中，重新設置圖像的src屬性，指向備用圖像的地址

var image = new Image();
document.body.appendChild(image);
image.onerror = function(e){
    image.src = 'smileBackup.gif';
}
image.src = 'smilex.gif';

 

abort

　　元素加載中止時，(如加載過程中按下ESC鍵，停止加載)，觸發該事件，常用於圖片加載

　　[注意]只有IE瀏覽器支持

var image = new Image();
image.onabort = function(){
    console.log(111);
}
document.body.appendChild(image);
image.src = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg';

 

unload

　　與load事件對應的是unload事件，該事件在文檔被完全卸載后觸發。刷新頁面時，也會觸發該事件

　　chrome/firefox/safari瀏覽器會阻止alert等對話框，IE瀏覽器會阻止console.log()等控制台顯示

window.onunload = function(e){
    //chrome報錯，firefox靜默失敗，IE彈出666
    alert(666);
}

window.onunload = function(e){
    //chrome和firefox控制台顯示666，IE靜默失敗
    console.log(666);
}

　　在卸載頁面的時候，會導致“空事件處理程序”的發生。“空事件處理程序”是指內存中存留的過時不用的事件處理程序，它們是造成Web應用程序內存與性能問題的主要原因。一般來說，最好的做法是在頁面卸載之前，先通過onunload事件處理程序移除所有事件處理程序。因此，只要是通過onload事件處理程序添加的東西，最后都應該通過onunload事件處理程序將它們移除

 

beforeunload

　　beforeunload事件在關閉網頁或刷新網頁時觸發。它一般地用來防止用戶不小心關閉網頁

　　如果要讓beforeunload事件生效，必須滿足以下兩個條件之一：1、事件處理程序返回一個真值；2、事件對象event.returnValue返回一個真值。如果兩個條件同時滿足，則以第一個條件為准

　　chrome/safari/firefox在對話框中不顯示指定文本，只顯示默認文本。而IE瀏覽器會在對話框中顯示返回值或returnValue值

window.onbeforeunload = function(e){
    e = e || event;
    //IE瀏覽器顯示指定文本，其他瀏覽器顯示默認文本
    e.returnValue = '要離開嗎？';    
}

 

DOMContentLoaded

　　window的onload事件會在頁面中的一切都加載完畢時觸發，但這個過程可能會因為要加載的外部資源過多而頗費周折。而DOMContentLoaded事件則在形成完整的DOM樹之后就會觸發，而不理會圖像、javascript文件、CSS文件或其他資源是否下載完畢。與load事件不同，DOMContentLoaded支持在頁面下載的早期添加事件處理程序，這也就意味着用戶能夠盡早地與頁面進行交互

　　[注意]網頁的javascript腳本是同步執行的，所以定義DOMContentLoaded事件的監聽函數，應該放在所有腳本的最前面。否則腳本一旦發生堵塞，將推遲觸發DOMContentLoaded事件

　　要處理DOMContentLoaded事件，可以為document或window添加相應的事件處理程序，盡管這個事件會冒泡到window，但它的目標實際上是document

　　[注意]IE8-瀏覽器不支持該事件

window.addEventListener('DOMContentLoaded',function(e){
    console.log(1);
})

　　對於不支持該事件的瀏覽器如IE8-瀏覽器，可以在頁面加載期間設置一個時間為0毫秒的超時調用，且必須作為頁面的第一個超時調用

setTimeout(function(){
    console.log(1);    
},0)

 

readystatechange

　　readystatechange事件發生在Document對象和XMLHttpRequest對象，它們的readyState屬性發生變化時觸發

　　這個事件的目的是提供與文檔或元素的加載狀態有關的信息。支持readystatechange事件的每個對象都有一個readyState屬性，可能包含下列5個值中的一個

uninitialized(未初始化)：對象存在但尚未初始化 
loading(正在加載)：對象正在加載數據
loaded(加載完畢)：對象加載數據完成
interactive(交互)：可以操作對象了，但還沒有完全加載
complete(完成)：對象已經加載完畢

　　這些狀態看起來很直觀，但並非所有對象都會經歷readyState的這幾個階段。換句話說，如果某個階段不適用某個對象，則該對象完全可能跳過該階段；並沒有規定哪個階段適用於哪個對象。顯然，這意味着readystatechange事件經常會少於4次，而readyState屬性的值也不總是連續的

　　對於document而言，值為"interactive"的readyState會在與DOMContentLoaded大致相同的時刻觸發readystatechange事件。此時，DOM樹已經加載完畢，可以安全地操作它了，因此就會進入交互(interactive)階段。但與此同時，圖像及其他外部文件不一定可用

//'interactive'  'complete'
document.onreadystatechange = function(e){
    if(document.readyState == 'uninitialized'){
        console.log('uninitialized');
    }
    if(document.readyState == 'loading'){
        console.log('loading');
    }
    if(document.readyState == 'loaded'){
        console.log('loaded');
    }
    if(document.readyState == 'interactive'){
        console.log('interactive');
    }
    if(document.readyState == 'complete'){
        console.log('complete');
    }    
}

　　在與load事件一起使用時，無法預測兩個事件觸發的先后順序。在包含較多或較大的外部資源的頁面中，會在load事件觸發之前先進入交互階段；而在包含較少或較小的外部資源的頁面中，則很難說readystatechange事件會發生在load事件前面

　　讓問題變得更復雜的是，交互階段可能會早於也可能會晚於完成階段出現，無法確保順序。在包含較多外部資源的頁面中，交互階段更有可能早於完成階段出現；而在頁面中包含較少外部資源的情況下，完成階段先於交互階段出現的可能性更大。因此，為了盡可能搶到先機，有必要同時檢測交互和完成階段

document.onreadystatechange = function(){
    if(document.readyState == 'interactive' || document.readyState == 'complete'){
        console.log('loaded');
        document.onreadystatechange = null;
    }
}

　　對於上面的代碼來說，當readystatechange事件觸發時，會檢測document.readyState的值，看當前是否已經進入交互階段或完成階段。如果是，則移除相應的事件處理程序以免在其他階段再執行

　　另外，IE10-瀏覽器支持給script元素和link元素觸發readystatechange事件，用來確定外部的javascript或css文件是否已經加載完成

var script  = document.createElement('script');
script.onreadystatechange = function(){
    if( script.readyState == 'loaded'  || script.readyState == 'complete'){
        console.log('loaded');
        script.onreadystatechange = null;
    }
}
script.src="js/digit.js";
document.body.appendChild(script);

var link  = document.createElement('link');
link.rel="stylesheet";
link.onreadystatechange = function(){
    if( link.readyState == 'loaded'  || link.readyState == 'complete'){
        console.log('loaded');
        link.onreadystatechange = null;
    }
}
link.href="test.css";
document.getElementsByTagName('body')[0].appendChild(link);