jQueryばかりに頼っていると忘れがちなので覚書です。
$(function(){ ... })
上記のように、jQueryを使えば、$()
を使いスクリプトの実行イベントを挿入できますが、
これをjQueryを使わずに記述する場合、
documentのDOMContentLoadedにイベントを挿入し、 次のようにします。
document.addEventListener('DOMContentLoaded', function { ... });
もしくは、DOMConentLoadedに対応していないブラウザは
windowのloadイベントに挿入し、 次のようにします。
window.addEventListener('load', function() { ... })
ちなみに、jQuery 2.1.4 の実際のコードはこのようになっています。
まずDOMContentLoadedのイベントで処理しようとし、
それで処理できなかった場合はloadのイベントへフォールバックして処理しているようです。
DOMContentLoadedイベントはドキュメントのロードと(DOMオブジェクトへの)パースが完了したときにfireされるイベントですが、従来からあるloadイベントはページ全体(スタイルシートや画像なども含めて)のロードが完了したときにfireされるイベントで、2つは同義ではありません。
一般的にはDOMContentLoadedのほうがより最適なタイミングでスクリプトの実行が可能です。
DOMContentLoadedについてはMDNで以下のように記載されています。
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event - load - should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded