Ответ 1
Первый пример связывает прослушиватель событий непосредственно с элементами. Он добавляет отдельный слушатель для каждого элемента, и он будет реагировать только на события на элементах, которые были в DOM на момент добавления слушателей.
Второй пример связывает прослушиватель событий с объектом документа. Он проверит любое событие, которое пузырится до объекта документа, и проверит, должен ли элемент, который был запущен, соответствовать селектору перед запуском функции. Он не требует, чтобы элементы существовали в документе, когда слушатель связан. Возможно, событие будет захвачено (другим слушателем), а распространение остановлено до того, как оно пузырится до объекта документа.