把多個(gè)JavaScript函數(shù)綁定到onload事件處理函數(shù)上的方法
為了讓函數(shù)只在頁(yè)面加載完畢后才得到執(zhí)行，我們會(huì)把函數(shù)綁定到onload事件上：
window.onload = userFunction
但如果有兩個(gè)函數(shù)：firstFunction() 和 secondFunction()，都想讓它們?cè)陧?yè)面加載完畢后得到執(zhí)行，該怎么辦？如果這樣：
window.onload = firstFunciton; window.onload = secondFunction;
只有最后一個(gè)函數(shù)能被執(zhí)行。由此可得：每個(gè)事件處理函數(shù)只能綁定一條指令。
但我們可以這樣做：
window.onload = function(){
firstFunction();
secondFunction();
}
這是一個(gè)解決辦法。
不過，還有一個(gè)更通的解決方案——額外編寫一些代碼，但好好處是，有了這些代碼，把函數(shù)，不管它們有多少，綁定到window.onload事件上的工作就非常簡(jiǎn)明易行了。
這個(gè)函數(shù)的的名字是addLoadEvent，它是由Simon Willison編寫的。它只有一個(gè)參數(shù)：打算在頁(yè)面加載完畢時(shí)執(zhí)行的函數(shù)的名字。
下面是addLoadEvent()函數(shù)將要完成的操作：
1. 把現(xiàn)有的window.onload事件處理函數(shù)的值存入變量oldonload。
2. 如果在這個(gè)處理函數(shù)上還沒有綁定任何函數(shù)，就像平時(shí)那樣把形函數(shù)添加給它。
3. 如果在這個(gè)處理函數(shù)上已經(jīng)綁定了一些函數(shù)，就把形函數(shù)追加到現(xiàn)有指令的末尾。
下面是addLoadEvent()函數(shù)的代碼清單：
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
這相當(dāng)于為那些將在頁(yè)面加載完畢時(shí)執(zhí)行的函數(shù)創(chuàng)建了一個(gè)隊(duì)列。如果想把剛才那兩個(gè)函數(shù)添加到隊(duì)列中去，只需要寫出以下代碼即可：
addLoadEvent(firstFunction); addLoadEvent(secondFunction);
以上這篇把多個(gè)JavaScript函數(shù)綁定到onload事件處理函數(shù)上的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于JS定義回車事件的實(shí)現(xiàn)代碼，需要的朋友可以參考下2013-07-07
下面小編就為大家?guī)硪黄猨s數(shù)組的五種迭代方法及兩種歸并方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了Javascript Web Worker使用過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03
js分解url參數(shù)（面向?qū)ο?極簡(jiǎn)主義法應(yīng)用）
剛看到笑看風(fēng)云寫的JavaScript面向?qū)ο?極簡(jiǎn)主義法)和一個(gè)分解url參數(shù)面試題，我作了一下修改，記錄下來2012-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)紅包雨功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
在處理前端顯示后端傳遞的包含換行符的文本時(shí),可以通過多種方法實(shí)現(xiàn)換行顯示,這篇文章主要介紹了前端處理文本換行展示4種處理方法,這些方法幫助前端正確展示格式化文本,解決了文本堆疊的問題,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了Ajax 加載數(shù)據(jù)，主要是為了查詢表的顯示，不用嵌入php通過ajax調(diào)用，現(xiàn)在手機(jī)端的更多顯示功能都是通過ajax實(shí)現(xiàn)的2017-01-01
jfinal與bootstrap的登錄跳轉(zhuǎn)實(shí)戰(zhàn)演習(xí)
這篇文章給大家分享jfinal與bootstrap之間的登錄跳轉(zhuǎn)，具體內(nèi)容包含有點(diǎn)擊登錄彈出模態(tài)框、點(diǎn)擊登錄確認(rèn)按鈕后的validate、jfinal的validate、jfinal的session管理、ajax請(qǐng)求與返回信息處理、頁(yè)面間智能跳轉(zhuǎn)。感興趣的朋友跟著小編一起看看吧2015-09-09
詳解怎么檢測(cè)和防止JavaScript死循環(huán)
最近工作中遇到了一些死循環(huán)導(dǎo)致的頁(yè)面卡死問題,經(jīng)過 trouble shooting 和代碼修復(fù)解決了問題,所以下面這篇文章主要給大家介紹了怎么檢測(cè)和防止JavaScript死循環(huán)的相關(guān)資料,需要的朋友可以參考下2021-11-11
基于JS實(shí)現(xiàn)簡(jiǎn)單滑塊拼圖游戲
本文通過實(shí)例代碼給大家介紹了JS實(shí)現(xiàn)簡(jiǎn)單滑塊拼圖游戲，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-10-10