[JavaScript]onloadイベントについて

onloadイベントとは

HTMLページに含まれるすべてのリソースの読み込みが完了したら発生するイベント。

onloadの書き方

基本的なonloadイベントの書き方は以下となる。

window.onload = funcrion(){
    //　処理内容
}

上記のようにwindowを指定すると、HTMLページに含まれるすべてのリソースが読み込まれた後に処理内容で指定された処理が実行される。
また、windowの部分に「img」などのHTML要素を指定することもできる。この場合、指定された要素の読み込みが完了した時点で処理が実行される。

さらに、addEventListenerを使って以下のように書くこともできる。

window.addEventListener('load',function(){
    // 処理内容
})

この2つの違いとして、同じ要素に複数のイベントハンドラーを設定することができるかどうかです。
onloadの場合は上書きされるため、最後に設定された処理だけが実行される。一方で、addEventListenerは上書きされないため、設定されたすべての処理が実行される。