JavaScript中的加載事件有哪些

今天就跟大家聊聊有關JavaScript中的加載事件有哪些，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

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="https://cache.yisu.com/upload/information/20200622/114/77346.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元素添加到文檔之前也不會開始下載樣式表

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

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);
}

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" rel="external nofollow" ;
document.getElementsByTagName('body')[0].appendChild(link);

看完上述內容，你們對JavaScript中的加載事件有哪些有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。