Какой из вариантов лучше использовать для события 'cllick' и почему?
Всегда юзайте второй. Помимо того, что навсегда себя обережете от возможных тупняков с динамично создаваемыми элементами, получите возможность биндить хендлер например не только на 1 ивент. Например если хотите обрабатывать mousemove и touchmove, то со вторым вариантом просто напишите$(document).on("mousemove touchmove", function(event) {});
Если именно id, то первый или третий - без разницы.
Если предполагается работа с динамически создаваемыми элементами, то второй.
К примеру, карта, на ней метки. Добавляем новые.
При вариантах 1 и 3 придется явно навешивать обработчики на все новые метки, а при методе 2, можно сделать один обработчик на весь класс. И он будет слушать события и от старых, и от новых меток.
UPD: да, и если вы заранее ограничите область "прослушивания" - это к лучшему. Намного лучше написать $('nav.menu').on('click', 'a', function(){}) чем $(document).on('click', 'nav.menu a', function(){}) и по производительности, и по сложности поддержки, и по количеству возможных багов.