複数のwindow.onloadで動かなくなった場合の対応方法

Javascriptで便利なwindow.onloadですが、
使い方を間違うと動かなくなってしまいます。

その中でもよくあるのが、window.onloadの複数記述。

以下のような例があります。

window.onload = function() {
    console.log('test1');
}
window.onload = function() {
    console.log('test2');
}

この場合、ログにはtest1とtest2が表示されます。
・・・というのは真っ赤なウソで、正しくはtest2だけが表示されます。
※最後に書いたイベントのみ実行されます。

他のシステム開発に途中から加わったり、
ネットにあるJavascriptサンプル記述をそのまま設定したりと、
経験のある方は多いのではないでしょうか。

そんな時は、addEventListenerで対応可能で、
以下のような記述となります。

window.addEventListener('load', function() {
    console.log('test1');
})
window.addEventListener('load', function() {
    console.log('test2');
})

ログにはtest1とtest2と正しく表示されると思います。

このような罠には、はまらないようにしましょう。