ページ読み込後に何か実行したい場合、 window.onload を使うことは多いと思います。
ただこの window.onload を使っていたとき、ある問題に直面しました。
それは window.onloadに複数コールバックは登録できない 、という問題
ここではこの原因と代わりの代替案についてまとめてみたいと思います。
このページの目次
window.onloadには複数コールバックは登録できない
例えば次のようなコードを書いたとしましょう。
|
1 2 3 4 5 6 7 8 9 |
/// １番目に登録 window.onload = function(){ alert('FIRST onload'); }; /// ２番目に登録 window.onload = function(){ alert('SECOND onload'); } |
これを実行してみると表示されるのは「SECOND onload」のアラートだけです。１番目に登録したコールバックは一切呼ばれません。
なぜなら window.onload に渡したコールバックは上書きされてしまうからです。
上書きされることを知ってれば「ああこれが原因か」と分かるんですが、それを理解してないとこういう挙動は予想外ですよね・・・
なので window.onload に複数登録するなら次に紹介する代わりの方法を使う必要があります。
onloadの複数登録の代わりに使える２つの方法
では window.onload に複数コールバック登録する代わりの方法について紹介していきます。コード例と一緒に説明すると次の通り
１．addEventListenerメソッドを使う
まず１つめは addEventListener メソッドを使ってコールバックを追加登録すること
そもそも window.onload というのは名前の通り window に対する load イベントへのイベントハンドラです。これは１つしか存在しないため、コールバックを複数登録すると当然上書きされてしまいます。
ただし addEventListener メソッドを使えば上書きせずに新しく追加ができます。
例えば先ほどのアラートの例を書き換えるなら次のような感じ
|
1 2 3 4 5 6 7 8 9 |
/// １番目を登録 window.addEventListener('load', function(){ alert('FIRST onload'); }); /// ２番目を登録 window.addEventListener('load', function(){ alert('SECOND onload'); }); |
これを実行してみると 「FIRST onload」のアラート表示 ⇒ 「SECOND onload」のアラート表示 のように両方ともコールバックが実行されるようになります。
ちなみに実行される順番は登録した順と変わりません。
２．jQueryのbindメソッドまたはonメソッドを使う
もしjQueryを使っているならbindメソッドまたはonメソッドも使えます。
これも先ほどの addEventListener 同様、上書きではなくコールバックを新規追加するタイプなので window.onload に複数コールバックを登録したいときに便利です。
例えば次がbindメソッドで load イベントに複数コールバック登録しているコード例
|
1 2 3 4 5 6 7 8 9 |
/// １つめの登録 $(window).bind('load', function(){ alert('FIRST onload'); }); /// ２つめの登録 $(window).bind('load', function(){ alert('SECOND onload'); }); |
どうなるかについては先ほどの addEventListener の場合と同じです。あと実行される順番についてもコールバック登録した順番と変わりません。
またonメソッドでも同じことができて、上コードの bind を on に置き換えればOKです。
ちなみにonメソッドとbindメソッドは次のような点で少し違います。
- onメソッド
引数にセレクタも指定できる。対になるのはoffメソッド
- bindメソッド
引数にはセレクタは指定できない。対になるのはunbindメソッド
この使い分けが問題になるのは動的に要素追加したときですね。
もしその場合は次記事で紹介したみたいにonメソッドでセレクタ指定しないと上手く動きません。
関連記事 ： jQueryでイベントが発火しないときの簡単な対処法
まあ load イベントの場合はどっちを使っても問題ないです。個人的にはonメソッドの方を使うことが多い気がします。（主に文字数が短いという理由で）
ここまでのまとめ
ということで簡単にまとめると次の通り
- window.onloadには複数登録できない
なぜならこれは window が持つ load イベントに対するイベントハンドラなため。複数コールバックを登録すると上書きされ、最後のものしか実行できない
- 対策１：addEventListenerメソッドを使う
例えば次がこれを使用した window.onload の代わりになるコード例
123window.addEventListener('load', function(){/// load時のコールバックの処理});上コードを書けば load 時に実行したいコールバックが複数登録可能
- 対策２：jQueryのbindメソッドを使う
例えば次が window.onload の代わりになるコード例
123$(window).bind('load', function(){/// load時のコールバック処理});ちなみにonメソッドも同じように使用可能。
とにかく window.onload にはコールバックを１つしか登録できないことに要注意です。もし複数登録するなら上で挙げた代わりの方法を使いましょう。
以上、 window.onload の扱い方の注意点についてでした。ではでは($・・)/~~~
