addLoadEventイベント-詳細

Addloadevent Event Detailed

ページが読み込まれた直後に関数を実行する必要がある場合は、ウィンドウオブジェクトのonloadイベントを呼び出すことができます。コードは次のとおりです。

window.onload=func1

しかし、ページが読み込まれるとすぐに実行する必要がある複数の関数がある場合はどうなりますか？このように書くことはできますか？

window.onload=func1 window.onload=func2

明らかに不可能です。実行関数を使用すると、ページが読み込まれたときにfunc2のみが実行されることがわかります。
では、func1とfunc2を同時に実行する他の方法はありますか？もちろん、無名関数を作成し、それをonloadイベントにバインドして、func1とfunc2を同時に実行することもできます。コードは次のとおりです。

window.onload=function(){ func1() func2() }

これにより、ページのロード時にfunc1とfunc2を同時に実行できます。ただし、これはベストプラクティスではありません。ベストプラクティスは、この問題を処理するaddLoadEvent関数を作成することです。コードは次のとおりです。

function addLoadEvent(func){ var oldonload=window.onload if(typeof window.onload!='function'){ window.onload=func }else{ window.onload=function(){ oldonload() func() } } }

関数addLoadEvent（func）{
最初にaddLoadEvent関数を作成し、パラメーターfuncを渡します。funcは呼び出したい関数です。

varoldοnlοad= window.onload
window.onloadを格納するoldonload変数を定義します。 window.onloadが最初の関数func1を呼び出し、次にwindow.οnlοad= func1（）、次にfunc1（）を呼び出す場合oldonloadを指定します

if（typeof window.onload！= ‘function’）{
このステップは、window.onloadが関数を呼び出したかどうかを判別するためのものです。

呼び出されない場合は、typeofwindow.οnlοad= null、等しくない場合はtrueを返し、window.οnlοad= funcを実行します。つまり、func1関数を初めて呼び出します。つまりwindow.οnlοad= func1

呼び出されると、falseを返し、無名関数ウィンドウを実行します。οnlοad= function（）{oldonload（）func（）}
window.onloadが呼び出されたため、window.οnlοad= func1、つまりoldonload（）を実行するoldonlοad= func1はfunc1（）を実行することと同等であり、func（）を実行するFunc（）は2番目に渡す関数です。 func2（）はfunc2（）を実行します

この時点で、func1とfunc2の両方が再度実行されます。

次のように、Webページの試行コードを記述できます
index.htmlコードは次のとおりです。

Untitled document

addLoadEvent.jsコードは次のとおりです。

// JavaScript Document function addLoadEvent(func){ var oldonload=window.onload if(typeof window.onload!='function'){ window.onload=func }else{ window.onload=function(){ oldonload() func() } } } Function func1(){console.log('This is func1')} Function func2(){console.log('This is func2')} Function func3(){console.log('This is func3')} Function func4(){console.log('This is func4')} addLoadEvent(func1) addLoadEvent(func2) addLoadEvent(func3) addLoadEvent(func4)

ブラウザのコンソールに移動して、出力を確認します。
これはfunc1です
これはfunc2です
これはfunc3です
これはfunc4です

addLoadEvent関数は、Webページのロード時に複数の関数を同時に実行する必要があるという問題を解決できます。同時にロードする必要のある関数の数に関係なく、1つのステートメントaddLoadEvent（functionName）のみを追加する必要があります。