Great question! The key, I think, is inheritance and containment. Consider a map of the world. Suppose we click on Wellesley College.

• Have we clicked on the town of Wellesley? Yes
• Have we clicked on the Norfolk County? Yes
• Have we clicked on the state of Massachusetts? Yes
• Have we clicked on the USA? Yes
• Have we clicked on North America? Yes
• Have we clicked on the map? Yes

Suppose each of those jurisdictions have something to say about the matter. (Maybe in the real world, there was a toxic waste spill. Maybe we need to notify all those jurisdictions.)

Delegation says: rather than add a click handler to each of the small things (e.g. towns), let's add a click handler to a single big thing that contains all of the small things.

The click handler on the container can know which small thing was clicked on by using this or event.target.

    $("container selector").on(
        'click',
        'small selector',
        function (evt) { handler(this); });

(Those are usually the same, but if they aren't, you usually want this.)