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

window.onloadを2つ以上使いたい時はaddEventListenerを使えばOK JavaScript / jQuery
この記事は約2分で読めます。

どうも上かるびです。

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

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

スポンサードサーチ

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

【例】


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

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

var X = A;
var X = B;

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

代わりにaddEventListenerを使おう

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

【例】

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

 

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

 

スポンサードサーチ

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

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

 

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

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

 

参考文献:MDN公式サイト

コメント

タイトルとURLをコピーしました