発火するタイミングが違う
DOMcontentLoaded
は HTML が全て読み込まれた時点で発火します。
load
はページ全体(CSS や JS ファイル、外部リソースなども含む)の読み込みが完了した時点で発火する。
という違いあるようです。
使い分け
DOMcontentLoaded
は、ボタンなどにイベントリスナーを追加したい場合に使用するなど。画面上に要素が存在しているので、仮にスタイルがあたっていなくても、ユーザーのリクエストに応じて、反応するようにするため。
load
は、画像のスライダーなどに用いると良いようです。画像は非同期的に読み込まれるため、全てが読み込まれた時点で発火するload
が適しています。
まとめ
普段何気なく使用していたイベントですが、しっかりと違いなどを気にかけることは大事だと改めて気が付くことができました!