loadイベントとDOMContentLoadedイベントの違いはイベント発火のタイミングです。
・loadイベントは、すべての読み込みが完了した時点でイベントが発火します。
・DOMContentLoadedイベントはDOMツリーの解析が終了した時点で発火します。
HTMLからブラウザに表示するまでの流れの中で二つのイベントがどのタイミングで発火するのか大まかに説明します。
1.ブラウザはグローバルオブジェクトであるWindowオブジェクトを生成します。そしてWindowオブジェクトのプロパティとしてDocumentオブジェクトが生成されます。
2.DocumentオブジェクトはDOMツリーを読み込んでいきます。HTMLの解析が終わるとDOMContentLoadedイベントが発火されます。
3.DOMツリーの構築が完了した後に、画像が読み込まれていきます。読み込みのすべてが完了するとWindowオブジェクトに対してloadイベントが発火されます。
例えば、画像のプレビュー機能を実装するときなどは、loadイベントではなく、DOMContentLoadedイベントとすることになります。