Ответ 1
Что вам не хватает, так это разные элементы производительности.
Ваш первый пример хуже работает при настройке обработчика кликов, но лучше работает, когда запускается фактическое событие.
Второй пример лучше работает при настройке обработчика кликов, но значительно хуже, когда инициируется фактическое событие.
Если все события были помещены на объект верхнего уровня (например, документ), тогда у вас будет огромный список селекторов, чтобы проверять каждое событие, чтобы найти, с какой функцией обработчика он работает. Именно поэтому jQuery отказался от метода .live(), потому что он ищет все события в объекте документа и когда было зарегистрировано много обработчиков событий .live(), производительность каждого события была плохая, потому что ей приходилось сравнивать каждое событие с лотами и множество селекторов, чтобы найти соответствующий обработчик событий для этого события. Для крупномасштабной работы гораздо эффективнее связывать событие как можно ближе к фактическому объекту, вызвавшему событие. Если объект не является динамическим, привяжите событие к объекту, который его вызовет. Это может стоить чуть меньше CPU, когда вы впервые привязываете событие, но фактическое инициирование событий будет быстрым и будет масштабироваться.
jQuery .on() и .delegate() могут быть использованы для этого, но рекомендуется найти объект-предк, который как можно ближе к вызывающему объекту. Это предотвращает накопление большого количества динамических событий на одном объекте верхнего уровня и предотвращает ухудшение производительности для обработки событий.
В приведенном выше примере это вполне разумно:
$("#someTable").on('click', "td.foo", function(e) {
$(e.target).doSomething();
});
Это даст вам одно компактное представление обработчика кликов для всех строк, и оно будет продолжать работать даже при добавлении/удалении строк.
Но это не будет иметь особого смысла:
$(document).on('click', "#someTable td.foo", function(e) {
$(e.target).doSomething();
});
потому что это будет смешивать события таблицы со всеми другими событиями верхнего уровня на странице, когда нет реальной необходимости делать это. Вы просто запрашиваете проблемы с производительностью при обработке событий без какой-либо выгоды от обработки событий там.
Итак, я думаю, что короткий ответ на ваш вопрос заключается в том, что обработка всех событий на одном верхнем уровне приводит к проблемам с производительностью, когда событие запускается, поскольку код должен сортировать, какой обработчик должен получить событие, когда есть много событий, обрабатываемых в одном и том же месте. Обработка событий как можно ближе к генерирующему объекту делает обработку событий более эффективной.