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

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

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

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

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

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

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

　　(1)一個頁面編寫多個onload事件。

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

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

　　(2)一個頁面編寫多個ready事件。

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

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