ページ読み込後に何か実行したい場合、 window.onload を使うことは多いと思います。

ただこの window.onload  を使っていたとき、ある問題に直面しました。

それは window.onloadに複数コールバックは登録できない 、という問題

ここではこの原因と代わりの代替案についてまとめてみたいと思います。

window.onloadには複数コールバックは登録できない

例えば次のようなコードを書いたとしましょう。

これを実行してみると表示されるのは「SECOND onload」のアラートだけです。１番目に登録したコールバックは一切呼ばれません。

なぜなら window.onload に渡したコールバックは上書きされてしまうからです。

上書きされることを知ってれば「ああこれが原因か」と分かるんですが、それを理解してないとこういう挙動は予想外ですよね・・・

なので window.onload  に複数登録するなら次に紹介する代わりの方法を使う必要があります。

onloadの複数登録の代わりに使える２つの方法

では window.onload  に複数コールバック登録する代わりの方法について紹介していきます。コード例と一緒に説明すると次の通り

１．addEventListenerメソッドを使う

まず１つめは addEventListener  メソッドを使ってコールバックを追加登録すること

そもそも window.onload  というのは名前の通り window  に対する load  イベントへのイベントハンドラです。これは１つしか存在しないため、コールバックを複数登録すると当然上書きされてしまいます。

ただし addEventListener  メソッドを使えば上書きせずに新しく追加ができます。

例えば先ほどのアラートの例を書き換えるなら次のような感じ

これを実行してみると　「FIRST onload」のアラート表示　⇒　「SECOND onload」のアラート表示　のように両方ともコールバックが実行されるようになります。

ちなみに実行される順番は登録した順と変わりません。

２．jQueryのbindメソッドまたはonメソッドを使う

もしjQueryを使っているならbindメソッドまたはonメソッドも使えます。

これも先ほどの addEventListener  同様、上書きではなくコールバックを新規追加するタイプなので window.onload  に複数コールバックを登録したいときに便利です。

例えば次がbindメソッドで load  イベントに複数コールバック登録しているコード例

どうなるかについては先ほどの addEventListener  の場合と同じです。あと実行される順番についてもコールバック登録した順番と変わりません。

またonメソッドでも同じことができて、上コードの bind  を on  に置き換えればOKです。

ちなみにonメソッドとbindメソッドは次のような点で少し違います。

• onメソッド
  引数にセレクタも指定できる。対になるのはoffメソッド
• bindメソッド
  引数にはセレクタは指定できない。対になるのはunbindメソッド

この使い分けが問題になるのは動的に要素追加したときですね。

もしその場合は次記事で紹介したみたいにonメソッドでセレクタ指定しないと上手く動きません。

関連記事 ： jQueryでイベントが発火しないときの簡単な対処法

まあ load  イベントの場合はどっちを使っても問題ないです。個人的にはonメソッドの方を使うことが多い気がします。（主に文字数が短いという理由で）

ここまでのまとめ

ということで簡単にまとめると次の通り

• window.onloadには複数登録できない
  なぜならこれは window  が持つ load  イベントに対するイベントハンドラなため。複数コールバックを登録すると上書きされ、最後のものしか実行できない
• 対策１：addEventListenerメソッドを使う

  例えば次がこれを使用した window.onload  の代わりになるコード例

  JavaScript

  window.addEventListener('load', function(){ /// load時のコールバックの処理 });

  1 2 3

  window.addEventListener('load', function(){ /// load時のコールバックの処理 });

  上コードを書けば load 時に実行したいコールバックが複数登録可能

• 対策２：jQueryのbindメソッドを使う

  例えば次が window.onload  の代わりになるコード例

  JavaScript

  $(window).bind('load', function(){ /// load時のコールバック処理 });

  1 2 3

  $(window).bind('load', function(){ /// load時のコールバック処理 });

  ちなみにonメソッドも同じように使用可能。

とにかく window.onload  にはコールバックを１つしか登録できないことに要注意です。もし複数登録するなら上で挙げた代わりの方法を使いましょう。

以上、 window.onload  の扱い方の注意点についてでした。ではでは($・・)/~~~