最近在寫一個動態(tài)菜單驻谆。即票罐,根據用戶角色權限生成菜單選項。動態(tài)菜單采用js進行html代碼拼接暮胧,再append到相應的節(jié)點锐借。但是存在一個問題,就是菜單功能的js代碼會在DOM元素加載完成之前執(zhí)行往衷,也就是菜單生成之前執(zhí)行钞翔,所以所有綁定的菜單點擊事件都不能執(zhí)行。
認識DOM和DOM加載過程以及如何讓DOM加載完成后再執(zhí)行js腳本文件
<b>DOM加載過程:</b>
網頁文檔加載都是按順序執(zhí)行的席舍。一般瀏覽器渲染操作順序大致是一下幾個步驟:
1.解析HTML結構
2.加載外部腳本和樣式表文件
3.解析并執(zhí)行腳本代碼
4.構造HTML DOM模型
5.加載圖片等外部文件
6.頁面加載完畢
從以上順序可以看出布轿,js等腳本會在DOM文檔構造之前執(zhí)行,這樣js就無法訪問DOM文檔對象模型俺亮。所以一般把可執(zhí)行腳本放在頁面初始化事件處理函數(shù)中驮捍,這樣能確保文檔加載完畢后再執(zhí)行腳本。所以我們一般這樣寫:
window.onload = function(){//執(zhí)行腳本}
window.onload表示頁面加載完了后(包括dom和js)
這樣的話脚曾,這段js代碼將會在DOM元素加載完畢之后進行菜單點擊事件的綁定东且。
這個問題調試了很久很久,最后一行代碼就解決了本讥。233...
代碼真是需要多寫珊泳,多累積經驗。感觸太深了拷沸。QAQ
window.onload大法好吧椤!
6-1
談談document.ready和window.onload的區(qū)別
在Jquery里面撞芍,我們可以看到兩種寫法:$(function(){}) 和$(document).ready(function(){})
這兩個方法的效果都是一樣的秧了,都是在dom文檔樹加載完之后執(zhí)行一個函數(shù)(注意,這里面的文檔樹加載完不代表全部文件加載完)序无。
而window.onload是在dom文檔樹加載完和所有文件加載完之后執(zhí)行一個函數(shù)验毡。也就是說$(document).ready要比window.onload先執(zhí)行。