Web前端培訓(xùn)：頁(yè)面加載事件怎么寫(xiě)

　　在網(wǎng)頁(yè)開(kāi)發(fā)中，當(dāng)通過(guò)JavaScript代碼操作DOM時(shí)候，如果JavaScript代碼位于頁(yè)面元素的上方，會(huì)因?yàn)轫?yè)面元素還沒(méi)有加載而執(zhí)行失敗。為了解決這個(gè)問(wèn)題，便需要將這些代碼包裹在onload事件的處理函數(shù)中，這樣瀏覽器會(huì)在DOM加載完全后再執(zhí)行JavaScript代碼。

　　由于onload事件需要在頁(yè)面的所有內(nèi)容(包括DOM元素以及圖片等文件)都加載完后才觸發(fā)，為了提高網(wǎng)頁(yè)的響應(yīng)速度，jQuery中提供了ready事件作為頁(yè)面加載事件，其功能類似于JavaScript的onload事件，區(qū)別在于ready事件只需頁(yè)面的DOM元素加載完全后便可觸發(fā)。ready事件的語(yǔ)法如下所示。

// 寫(xiě)法1
$(document).ready(function() {
    //頁(yè)面加載后要執(zhí)行的代碼
});

//寫(xiě)法2
$(function() {
    //頁(yè)面加載后要執(zhí)行的代碼
});

　上述語(yǔ)法中，document參數(shù)可以省略，由于寫(xiě)法2比較簡(jiǎn)潔，所以在實(shí)際開(kāi)發(fā)中應(yīng)用頻率較高。

　　另外，與onload事件相比，ready事件的語(yǔ)法比較靈活。這是由于一個(gè)頁(yè)面只能編寫(xiě)一個(gè)onload事件，并且只能執(zhí)行一次;但是一個(gè)頁(yè)面中可以包含多個(gè)ready事件，多個(gè)事件之間按照編寫(xiě)順序依次執(zhí)行。示例代碼如下。

　　(1)一個(gè)頁(yè)面編寫(xiě)多個(gè)onload事件。

window.onload = function() {
    console.log('text');
};
window.onload = function() {
    console.log('text2');
};

　　上述代碼無(wú)法正確執(zhí)行，執(zhí)行結(jié)果只輸出“text2”。

　　(2)一個(gè)頁(yè)面編寫(xiě)多個(gè)ready事件。

window.onload = function() {
    console.log('text');
};
window.onload = function() {
    console.log('text2');
};

　　上述代碼可以正確執(zhí)行，在控制臺(tái)中依次輸出“text1”和“text2”。