window.onloadを２つ以上使いたい時はaddEventListenerを使えばOK

JavaScript / jQuery

2022.02.24 2021.01.19

この記事は約2分で読めます。

どうも上かるびです。

先日、仕事でJSを書いていて「何で効かないんや！？」となってwindow.onloadを書き換えたら直りました。

備忘録も含めてまとめておきたいと思います。

Contents

window.onloadを複数書くと上書きされてしまう
代わりにaddEventListenerを使おう
jQueryの場合はonメソッド、bindメソッドで代用

window.onloadを複数書くと上書きされてしまう

【例】

window.onload = function(){
  console.log('ロースを注文しました');
};
 
window.onload = function(){
  console.log('カルビを注文しました');
}

window.onload = function(){

console.log('ロースを注文しました');

};

window.onload = function(){

console.log('カルビを注文しました');

}

上記の場合、「カルビを注文しました」としか表示されません。ロースは食べられません。

そもそもwindow.onloadも代入しているだけなので、上書きされることになります。

let X = 1;
let X = 2;

と書いたら、X=2になるよね、というお話です。

代わりにaddEventListenerを使おう

window.onloadを２つ以上使いたい場合は、addEventListenerを使えばOKです。

【例】

window.addEventListener('load', function(){
  console.log('ロースを注文しました');
});

window.addEventListener('load', function(){
console.log('カルビを注文しました');
});

window.addEventListener('load', function(){

console.log('ロースを注文しました');

});

window.addEventListener('load', function(){

console.log('カルビを注文しました');

});

これで無事、ロースの注文も通りました。

似たイベントとしてDOMContentLoadedがありますが、それとの違いはまた別記事でまとめようと思います。

jQueryの場合はonメソッド、bindメソッドで代用

普段あまりjQueryを使わないので、参考記事を載せておきます。（とても分かりやすいです）

jQueryでイベントが発火しないときの簡単な対処法 | PisukeCode - Web開発まとめ

イベントハンドルを登録してるのになぜかイベントが発火しないことはjQueryを使っているとちょくちょく遭遇します。しかもエラーも出ないし、DOMの読み込み後にイベントを設定してるのに関わらずです。という訳でイベントが発火しないときの簡単にできる対処法について紹介

最近ようやくJSを書いてて楽しいという領域まで来ることができました。

これからも一歩一歩少しずつ理解していきたいです。

参考文献：MDN公式サイト

Window: load イベント - Web API | MDN

load イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。これは DOMContentLoaded が、ページの DOM の読み込みが完了すれば、リソースの読み込みが完了するのを待たずに発生するのと対照的です。

EventTarget: addEventListener() メソッド - Web API | MDN

addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。