今天就跟大家聊聊有關(guān)JavaScript中的加載事件有哪些,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)主營(yíng)長(zhǎng)寧網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),長(zhǎng)寧h5小程序制作搭建,長(zhǎng)寧網(wǎng)站營(yíng)銷推廣歡迎長(zhǎng)寧等地區(qū)企業(yè)咨詢
load
load事件是最常用的一個(gè)事件,當(dāng)頁(yè)面完全加載后(包括所有圖像、javascript文件、CSS文件等外部資源),就會(huì)觸發(fā)window上的load事件
[注意]IE8-瀏覽器不會(huì)為該事件設(shè)置srcElement屬性,而其他瀏覽器的target屬性指向document
window.onload = function(e){ e = e || event; var target = e.target || e.srcElement; //IE8-瀏覽器返回null,其他瀏覽器返回document console.log(target); }
load事件不僅發(fā)生在document對(duì)象,還發(fā)生在各種外部資源上面。瀏覽網(wǎng)頁(yè)就是一個(gè)加載各種資源的過(guò)程,圖像(image)、樣式表(style sheet)、腳本(script)、視頻(video)、音頻(audio)、Ajax請(qǐng)求(XMLHttpRequest)等等。這些資源和document對(duì)象、window對(duì)象、XMLHttpRequestUpload對(duì)象,都會(huì)觸發(fā)load事件
[注意]如果頁(yè)面從瀏覽器緩存加載,并不會(huì)觸發(fā)load事件
圖像和框架iframe也可以觸發(fā)load事件
[注意]要在指定圖像的src屬性之前先指定事件,圖像是從設(shè)置src屬性之后開始下載
var img = new Image(); img.onload = function(){ document.body.appendChild(img); } img.src="/upload/otherpic45/77346.jpg";
script元素也可以觸發(fā)load事件,以便開發(fā)人員確定動(dòng)態(tài)加載的javascript文件是否加載完畢。與圖像不同,只有在設(shè)置了script元素的src屬性并將該元素添加到文檔后,才會(huì)開始下載javascript文件。換句話說(shuō),指定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元素可以觸發(fā)load事件,且無(wú)兼容性問(wèn)題。與script類似,在未指定href屬性并將link元素添加到文檔之前也不會(huì)開始下載樣式表
類似地,link元素可以觸發(fā)load事件,且無(wú)兼容性問(wèn)題。與script類似,在未指定href屬性并將link元素添加到文檔之前也不會(huì)開始下載樣式表
error
load事件在加載成功時(shí)觸發(fā),而error事件與之正相反,在加載失敗時(shí)觸發(fā)。凡是可以觸發(fā)load事件的元素,同樣可以觸發(fā)error事件
任何沒(méi)有通過(guò)try-catch處理的錯(cuò)誤都會(huì)觸發(fā)window對(duì)象的error事件
error事件可以接收三個(gè)參數(shù):錯(cuò)誤消息、錯(cuò)誤所在的URL和行號(hào)。多數(shù)情況下,只有錯(cuò)誤消息有用,因?yàn)閁RL只是給出了文檔的位置,而行號(hào)所指的代碼行既可能出自嵌入的javascript代碼,也可能出自外部的文件
要指定onerror事件處理程序,可以使用DOM0級(jí)技術(shù),也可以使用DOM2級(jí)事件的標(biāo)準(zhǔn)格式
//DOM0級(jí) window.onerror = function(message,url,line){ alert(message); } //DOM2級(jí) window.addEventListener("error",function(message,url,line){ alert(message); });
瀏覽器是否顯示標(biāo)準(zhǔn)的錯(cuò)誤消息,取決于onerror的返回值。如果返回值為false,則在控制臺(tái)中顯示錯(cuò)誤消息;如果返回值為true,則不顯示
//控制臺(tái)顯示錯(cuò)誤消息 window.onerror = function(message,url,line){ alert(message); return false; } a; //控制臺(tái)不顯示錯(cuò)誤消息 window.onerror = function(message,url,line){ alert(message); return true; } a;
這個(gè)事件處理程序是避免瀏覽器報(bào)告錯(cuò)誤的最后一道防線。理想情況下,只要可能就不應(yīng)該使用它。只要能夠適當(dāng)?shù)厥褂胻ry-catch語(yǔ)句,就不會(huì)有錯(cuò)誤交給瀏覽器,也就不會(huì)觸發(fā)error事件
圖像也支持error事件。只要圖像的src特性中的URL不能返回可以被識(shí)別的圖像格式,就會(huì)觸發(fā)error事件。此時(shí)的error事件遵循DOM格式,會(huì)返回一個(gè)以圖像為目標(biāo)的event對(duì)象
發(fā)生error事件時(shí),圖像下載過(guò)程已經(jīng)結(jié)束,也就是不能再重新下載了。但是,可以在error事件中,重新設(shè)置圖像的src屬性,指向備用圖像的地址
var image = new Image(); document.body.appendChild(image); image.onerror = function(e){ image.src = 'smileBackup.gif'; } image.src = 'smilex.gif';
abort
元素加載中止時(shí),(如加載過(guò)程中按下ESC鍵,停止加載),觸發(fā)該事件,常用于圖片加載
[注意]只有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事件對(duì)應(yīng)的是unload事件,該事件在文檔被完全卸載后觸發(fā)。一般地,在刷新頁(yè)面時(shí),會(huì)觸發(fā)該事件
chrome/firefox/safari瀏覽器會(huì)阻止alert等對(duì)話框,IE瀏覽器會(huì)阻止console.log()等控制臺(tái)顯示
window.onunload = function(e){ //chrome報(bào)錯(cuò),firefox靜默失敗,IE彈出666 alert(666); }
window.onunload = function(e){ //chrome和firefox控制臺(tái)顯示666,IE靜默失敗 console.log(666); }
beforeunload
beforeunload事件在關(guān)閉網(wǎng)頁(yè)或刷新網(wǎng)頁(yè)時(shí)觸發(fā)。它一般地用來(lái)防止用戶不小心關(guān)閉網(wǎng)頁(yè)
如果要讓beforeunload事件生效,必須滿足以下兩個(gè)條件之一:1、事件處理程序返回一個(gè)真值;2、事件對(duì)象event.returnValue返回一個(gè)真值。如果兩個(gè)條件同時(shí)滿足,則以第一個(gè)條件為準(zhǔn)
chrome/safari/firefox在對(duì)話框中不顯示指定文本,只顯示默認(rèn)文本。而IE瀏覽器會(huì)在對(duì)話框中顯示返回值或returnValue值
window.onbeforeunload = function(e){ e = e || event; //IE瀏覽器顯示指定文本,其他瀏覽器顯示默認(rèn)文本 e.returnValue = '要離開嗎?'; }
DOMContentLoaded
window的onload事件會(huì)在頁(yè)面中的一切都加載完畢時(shí)觸發(fā),但這個(gè)過(guò)程可能會(huì)因?yàn)橐虞d的外部資源過(guò)多而頗費(fèi)周折。而DOMContentLoaded事件則在形成完整的DOM樹之后就會(huì)觸發(fā),而不理會(huì)圖像、javascript文件、CSS文件或其他資源是否下載完畢。與load事件不同,DOMContentLoaded支持在頁(yè)面下載的早期添加事件處理程序,這也就意味著用戶能夠盡早地與頁(yè)面進(jìn)行交互
[注意]網(wǎng)頁(yè)的javascript腳本是同步執(zhí)行的,所以定義DOMContentLoaded事件的監(jiān)聽函數(shù),應(yīng)該放在所有腳本的最前面。否則腳本一旦發(fā)生堵塞,將推遲觸發(fā)DOMContentLoaded事件
要處理DOMContentLoaded事件,可以為document或window添加相應(yīng)的事件處理程序,盡管這個(gè)事件會(huì)冒泡到window,但它的目標(biāo)實(shí)際上是document
[注意]IE8-瀏覽器不支持該事件
window.addEventListener('DOMContentLoaded',function(e){ console.log(1); })
對(duì)于不支持該事件的瀏覽器如IE8-瀏覽器,可以在頁(yè)面加載期間設(shè)置一個(gè)時(shí)間為0毫秒的超時(shí)調(diào)用,且必須作為頁(yè)面的第一個(gè)超時(shí)調(diào)用
setTimeout(function(){ console.log(1); },0)
readystatechange
readystatechange事件發(fā)生在Document對(duì)象和XMLHttpRequest對(duì)象,它們的readyState屬性發(fā)生變化時(shí)觸發(fā)
這個(gè)事件的目的是提供與文檔或元素的加載狀態(tài)有關(guān)的信息。支持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樹已經(jīng)加載完畢,可以安全地操作它了,因此就會(huì)進(jìn)入交互(interactive)階段。但與此同時(shí),圖像及其他外部文件不一定可用
//'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事件一起使用時(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è)交互和完成階段
document.onreadystatechange = function(){ if(document.readyState == 'interactive' || document.readyState == 'complete'){ console.log('loaded'); document.onreadystatechange = null; } }
對(duì)于上面的代碼來(lái)說(shuō),當(dāng)readystatechange事件觸發(fā)時(shí),會(huì)檢測(cè)document.readyState的值,看當(dāng)前是否已經(jīng)進(jìn)入交互階段或完成階段。如果是,則移除相應(yīng)的事件處理程序以免在其他階段再執(zhí)行
另外,IE10-瀏覽器支持給script元素和link元素觸發(fā)readystatechange事件,用來(lái)確定外部的javascript或css文件是否已經(jīng)加載完成
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);
看完上述內(nèi)容,你們對(duì)JavaScript中的加載事件有哪些有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。