JavaScript判斷頁(yè)面加載完之后再執(zhí)行預(yù)定函數(shù)的技巧_javascript技巧

JavaScript判斷頁(yè)面加載完之后再執(zhí)行預(yù)定函數(shù)的技巧_javascript技巧

ID:41391887

大?。?4.77 KB

頁(yè)數(shù):3頁(yè)

時(shí)間:2019-08-24

JavaScript判斷頁(yè)面加載完之后再執(zhí)行預(yù)定函數(shù)的技巧_javascript技巧_第1頁(yè)
JavaScript判斷頁(yè)面加載完之后再執(zhí)行預(yù)定函數(shù)的技巧_javascript技巧_第2頁(yè)
JavaScript判斷頁(yè)面加載完之后再執(zhí)行預(yù)定函數(shù)的技巧_javascript技巧_第3頁(yè)
資源描述:

《JavaScript判斷頁(yè)面加載完之后再執(zhí)行預(yù)定函數(shù)的技巧_javascript技巧》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)

1、JavaScript判斷頁(yè)面加載完之后再執(zhí)行預(yù)定函數(shù)的技巧JavaScript腳本語(yǔ)言的執(zhí)行,是需要觸發(fā)的。一般的做法就是在網(wǎng)頁(yè)中,直接編寫(xiě)幾個(gè)函數(shù),有的在代碼被加載的時(shí)候就被瀏覽器處理,或者使用類似下而的代碼來(lái)觸發(fā)實(shí)現(xiàn)函數(shù)的相關(guān)功能。

上面代碼的意思就是,當(dāng)鼠標(biāo)點(diǎn)擊id為link的元素的時(shí)候,就觸發(fā)了它的onclick事件,然后執(zhí)行使用JavaScript定義的fun函數(shù)。這樣的做法肯定是很不合理的,因?yàn)橛|發(fā)操作直接寫(xiě)進(jìn)了HTML結(jié)構(gòu)里面,內(nèi)容和行為沒(méi)有隔離開(kāi),對(duì)日后的二次開(kāi)發(fā)或者修改帶來(lái)不便。需要注意

2、的是,當(dāng)事件處理與對(duì)應(yīng)元索綁定起來(lái)的吋候,只冇在那個(gè)元索加載完Z后才能進(jìn)行操作。如杲說(shuō)把處理的腳木放在了head區(qū)域,瀏覽器會(huì)報(bào)錯(cuò)。因?yàn)橄露腍TML元素述沒(méi)冇加載出來(lái),head中的處理腳本已經(jīng)被處理了。一個(gè)好的執(zhí)行JavaScript代碼的方法應(yīng)該是行為內(nèi)容分離的、在頁(yè)面加載后處理的。所以,處理JavaScript代碼我們要用到監(jiān)聽(tīng)器和window對(duì)象的load事件。監(jiān)聽(tīng)器監(jiān)聽(tīng)器實(shí)際上的功能就是行為與內(nèi)容分離的。以前需要在HTML屮加上一些觸發(fā)事件來(lái)觸發(fā)JavaScript的相關(guān)函數(shù),而現(xiàn)在直接在JavaScript中對(duì)某個(gè)元素的使用監(jiān)聽(tīng)器,監(jiān)聽(tīng)這個(gè)元素的事件,如果這個(gè)元

3、素被觸發(fā)了某些事件,在監(jiān)聽(tīng)器中又定義了這個(gè)事件對(duì)應(yīng)的處理函數(shù),那么就會(huì)處理這個(gè)函數(shù)。W3C的標(biāo)準(zhǔn)方法叫做addEvcntListoner,被IE9,chrome,firefox,opera所支持,寫(xiě)法:window.addEventListener('load',function,false);早期IE中有attachEvcnt方法效果類似:window,attachEvent('onload',function);使用監(jiān)聽(tīng)器的方法也很簡(jiǎn)單,就是先獲取頁(yè)而屮的某個(gè)元素,然后對(duì)這個(gè)元素使用監(jiān)聽(tīng)器,定義監(jiān)聽(tīng)的事件和對(duì)應(yīng)的事件處理函數(shù),就上文例子:document.getElem

4、entById('link').addEventListener('click',fun,false)f關(guān)于監(jiān)聽(tīng)器更加詳細(xì)的使用說(shuō)明,請(qǐng)見(jiàn)文末補(bǔ)充資料。window,onload事件onload事件只有在整個(gè)頁(yè)面已經(jīng)完全載入的時(shí)候才會(huì)被觸發(fā),我們將JavaScript代碼寫(xiě)進(jìn)onload事件中,就可以保證在HTML元素被加載完成之后,瀏覽器才會(huì)處理我們的JavaScript代碼?;A(chǔ)的寫(xiě)法:window?onload=function(){//code}這樣,這個(gè)函數(shù)里而的code會(huì)在加載完成Z后被處理。但是,這種方法冇個(gè)缺陷,就是只能用于這一個(gè)函數(shù)。頁(yè)而屮無(wú)法出現(xiàn)多個(gè)wi

5、ndow,onload事件,如果出現(xiàn)了多個(gè)onload事件,那么后面的內(nèi)容會(huì)覆蓋前面的。那么,我們可以這樣做,在一個(gè)window,onload事件屮,寫(xiě)上所有需要加載的函數(shù)名,然后在外面定義函數(shù):window.onload=function(){fund();func2();}functionfuncl(){???}functionfunc2(){???}這樣做雖然可以,但是很不方便,因?yàn)槲覀冃枰阉砸虞d的函數(shù)名都寫(xiě)進(jìn)去,修改起來(lái)就會(huì)很麻煩。當(dāng)然辦法肯定是有的,jQuery就特別提供了很強(qiáng)大的多腳本加載方法,那么原生的JavaScript肯定也有辦法。window,on

6、load同時(shí)處理多個(gè)函數(shù)我們需要編寫(xiě)一個(gè)處理函數(shù),先看一下代碼:funclionaddLoadListener(fn){if(typeofwindow.addEventListener!="undefined'){window.addEventListener('load',fn,false);}elseif(typeofdocument.addEventListener!=^undefined"){document.addEventListener('load',fn,false);}elseif(typeofwindow,attachEvent!二'undefined,

7、){window.attachEvent('onloacT,fn);}else{varoldfn=window,onload;if(typeofwindow,onload!="function'){window,onload二fn;}else{window.onload二function(){oldfn();fn();};}簡(jiǎn)單的來(lái)解析一下,這個(gè)自定義的addLoadListener函數(shù),傳遞一個(gè)函數(shù)名稱作為參數(shù)。它首先判斷瀏覽器是否支持相關(guān)的監(jiān)聽(tīng)器,如果支持監(jiān)聽(tīng)器,就使用監(jiān)聽(tīng)器監(jiān)聽(tīng)window對(duì)彖的onload事

當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫(huà)的文件,查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常,文件下載后無(wú)此問(wèn)題,請(qǐng)放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫(kù)負(fù)責(zé)整理代發(fā)布。如果您對(duì)本文檔版權(quán)有爭(zhēng)議請(qǐng)及時(shí)聯(lián)系客服。
3. 下載前請(qǐng)仔細(xì)閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動(dòng)等原因無(wú)法下載或下載錯(cuò)誤,付費(fèi)完成后未能成功下載的用戶請(qǐng)聯(lián)系客服處理。