onloadイベントとは
HTMLページに含まれるすべてのリソースの読み込みが完了したら発生するイベント。
onloadの書き方
基本的なonloadイベントの書き方は以下となる。
window.onload = funcrion(){
// 処理内容
}
上記のようにwindowを指定すると、HTMLページに含まれるすべてのリソースが読み込まれた後に処理内容で指定された処理が実行される。
また、windowの部分に「img」などのHTML要素を指定することもできる。この場合、指定された要素の読み込みが完了した時点で処理が実行される。
さらに、addEventListenerを使って以下のように書くこともできる。
window.addEventListener('load',function(){
// 処理内容
})
この2つの違いとして、同じ要素に複数のイベントハンドラーを設定することができるかどうかです。
onloadの場合は上書きされるため、最後に設定された処理だけが実行される。一方で、addEventListenerは上書きされないため、設定されたすべての処理が実行される。