При использовании jQuery on (), зачем использовать (document) вместо самого элемента?

Я бы хотел, чтобы эксперт по jQuery своими словами объяснил, почему идентификатор $ (document) рекомендуется другими для jQuery on () вместо простого использования самого элемента

Пример 1: Почему здесь используется $ (document) лучше, чем в примере № 2?

$(document).on("click", ".areaCodeList a", function(){
    // do stuff
});

Пример 2: Почему этот элемент используется таким образом, учитывая, что это не лучшая практика по сравнению с примером 1?

$(".areaCodeList a").on("click", function(){
    // do stuff
});