window.addEventListenerの記述位置

Question

例
function a(){
b()
}
b()を実行させるには、a()が実行される必要があると認識しています。また、window.onloadはDOMレンダリング後に一度だけ実行されるメソッドだとも認識しています。...この場合、下のコードにおいて、window.onload処理が行われた後にも、window.onload内に記述されているWmSize()が処理されるのでしょうか？WmSize()を外に記述しても結果は同じなので、グローバルということなのでしょうか？

window.onload=function(){ 　　　　　　　//⬅︎　　　　　　　　　　
gImgMap=new Image();
gImgMap.src="map.png";
gScreen=document.createElement("canvas");
gScreen.width=128;
gScreen.height=120;
WmSize();
window.addEventListener("resize",function(){WmSize()}); //⬅︎
setInterval(function(){WmTimer()},33);
}
function WmSize(){
const ca=document.getElementById("main");
ca.width=window.innerWidth;
ca.height=window.innerHeight;
}

Comments

[ku__ra__ge]

> WmSize()を外に記述しても結果は同じなので、グローバルということなのでしょうか？
「グローバルということ」とは一体何のことでしょう。
windowはグローバル変数です。
WmSize関数はグローバル関数です。
……で回答になっていますか？

Answer 1

b()を実行させるには、a()が実行される必要があると認識しています。

いや、定義したスコープが有効な範囲からならどこでも実行できますよ。
ただし、b関数を定義してればですが。

window.onloadはDOMレンダリング後に一度だけ実行されるメソッドだとも認識しています。

厳密に言えば違います。
レンダリング完了ではなく、
HTML上にマークアップされている、全てのリソースを読み込んだ後に実行されます。

window.onload処理が行われた後にも、window.onload内に記述されているWmSize()が処理されるのでしょうか？WmSize()を外に記述しても結果は同じなので、グローバルということなのでしょうか？

参照範囲が変わるので、使えた変数が使えなくなる場合がありますが、
今回のコードは、同関数内のローカル変数しか参照していないので、そうなりますね。
グローバルに定義すればグローバルになります。

Comments

[退会済みユーザー]

やっと分かった！！分かりやすい回答ありがとうございます????

Answer 2

window.onload処理が行われた後にも、
window.onload内に記述されているWmSize()が処理されるのでしょうか？

window.onload内ににWmSize()は2つありますが、window.addEventListener("resize", function(){WmSize()} );で記述されたWmSize()はリサイズされるたびに呼び出されます。