把多個(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è)解決辦法。
不過(guò)，還有一個(gè)更通的解決方案——額外編寫(xiě)一些代碼，但好好處是，有了這些代碼，把函數(shù)，不管它們有多少，綁定到window.onload事件上的工作就非常簡(jiǎn)明易行了。
這個(gè)函數(shù)的的名字是addLoadEvent，它是由Simon Willison編寫(xiě)的。它只有一個(gè)參數(shù)：打算在頁(yè)面加載完畢時(shí)執(zhí)行的函數(shù)的名字。
下面是addLoadEvent()函數(shù)將要完成的操作：
1. 把現(xiàn)有的window.onload事件處理函數(shù)的值存入變量oldonload。
2. 如果在這個(gè)處理函數(shù)上還沒(méi)有綁定任何函數(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ì)列中去，只需要寫(xiě)出以下代碼即可：
addLoadEvent(firstFunction); addLoadEvent(secondFunction);
以上這篇把多個(gè)JavaScript函數(shù)綁定到onload事件處理函數(shù)上的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- JavaScript 事件屬性綁定帶參數(shù)的函數(shù)
- JS 事件綁定函數(shù)代碼
- js使用函數(shù)綁定技術(shù)改變事件處理程序的作用域
- javascript中的綁定與解綁函數(shù)應(yīng)用示例
- JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法
- 詳解JavaScript函數(shù)綁定
- JavaScript為事件句柄綁定監(jiān)聽(tīng)函數(shù)實(shí)例詳解
- 兼容瀏覽器的js事件綁定函數(shù)(詳解)
- JavaScript函數(shù)中的this四種綁定形式
- JavaScript函數(shù)綁定用法實(shí)例分析
相關(guān)文章
在JavaScript中雖沒(méi)有類(lèi)似的方法，但我們可以利用字符串的replace方法自定義字符串的格式化方法。下面通過(guò)本文給大家分享使用JS在HTML中自定義字符串格式化的方法，需要的的朋友參考下吧2017-07-07
這篇文章主要介紹了js獲取json元素?cái)?shù)量的方法,可實(shí)現(xiàn)對(duì)json元素?cái)?shù)量的統(tǒng)計(jì)功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
JS學(xué)習(xí)筆記之?dāng)?shù)組去重實(shí)現(xiàn)方法小結(jié)
這篇文章主要介紹了JS學(xué)習(xí)筆記之?dāng)?shù)組去重實(shí)現(xiàn)方法,結(jié)合實(shí)例形式總結(jié)分析了javascript數(shù)組去重的5種常見(jiàn)實(shí)現(xiàn)方法及相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
一文教你如何實(shí)現(xiàn)localStorage的過(guò)期機(jī)制
要知道localStorage本身并沒(méi)有提供過(guò)期機(jī)制,既然如此那就只能我們自己來(lái)實(shí)現(xiàn)了,這篇文章主要給大家介紹了關(guān)于如何實(shí)現(xiàn)localStorage過(guò)期機(jī)制的相關(guān)資料,需要的朋友可以參考下2022-02-02
three.js著色器材質(zhì)的內(nèi)置變量示例詳解
這篇文章主要給大家介紹了關(guān)于three.js著色器材質(zhì)內(nèi)置變量的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
基于JavaScript實(shí)現(xiàn)滑動(dòng)門(mén)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滑動(dòng)門(mén)效果的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
JSON是一種輕量級(jí)（Light-Meight)、基于文本的(Text-Based)、可讀的(Human-Readable)格式，這篇文章主要介紹了JSON 基本使用教程,需要的朋友可以參考下2023-02-02
如一個(gè)文件上傳功能，需要對(duì)上傳文件進(jìn)行文件格式限制。我們通常會(huì)使用后綴名做限制。2011-03-03
使用javascript實(shí)現(xiàn)雪花飄落的效果
本文主要介紹了使用javascript實(shí)現(xiàn)雪花飄落的特效，雖然網(wǎng)上有很多，不過(guò)都是比較陳舊了，兼容性不是太好，于是動(dòng)手寫(xiě)一個(gè)，把思路和實(shí)現(xiàn)代碼都分享給大家。2015-01-01
javascript另類(lèi)方法實(shí)現(xiàn)htmlencode()與htmldecode()函數(shù)實(shí)例分析
這篇文章主要介紹了javascript另類(lèi)方法實(shí)現(xiàn)htmlencode()與htmldecode()函數(shù),結(jié)合實(shí)例形式分析了javascript字符編碼與解碼操作的相關(guān)技巧,需要的朋友可以參考下2016-11-11