Прямые и делегированные - jQuery .on ()

Я пытаюсь понять это конкретное различие между прямыми и делегированными обработчиками событий с использованием jQuery .on () метод . В частности, последнее предложение в этом абзаце:

Когда предоставляется селектор , обработчик события упоминается как делегированный . Обработчик не вызывается, когда событие происходит непосредственно в привязанном элементе, а только для потомков (внутренних элементов), которые соответствуют селектору. jQuery перемещает событие от цели события до элемента, к которому прикреплен обработчик (т. е. от самого внутреннего до самого внешнего элемента), и запускает обработчик для любых элементов вдоль этого пути, соответствующих селектору.

Что означает «запускает обработчик любых элементов»? Я сделал тестовую страницу , чтобы поэкспериментировать с этой концепцией. Но обе следующие конструкции приводят к одному и тому же поведению:

$("div#target span.green").on("click", function() {
   alert($(this).attr("class") + " is clicked");
});

или,

$("div#target").on("click", "span.green", function() {
   alert($(this).attr("class") + " is clicked");
});

Может быть, кто-то может сослаться на другой пример, чтобы прояснить этот момент? Спасибо.