Поведение браузера с огромными домами

Question

Может ли кто-нибудь рассказать о том, как различные браузеры обрабатывают следующее:

Изобразите HTML-документ, по сути, отображающий содержимое статического приложения с большим количеством данных.) такие элементы в документе.

Какой самый быстрый способ назначить событие щелчка для всех этих элементов?

• <div class="abundant_class" onclick="javascript:foo()">
• $('.abundant_class').click(function(foo();));
• $('div').click(function(){if ($(this).hasClass('abundant_class')){foo();}
• что-то еще?

Мне интересно, сколько конкретно памяти и ЦП занимают эти варианты.

Заранее спасибо.

Тревор Миллс

Answer 1

В подобных случаях используйте .live() или .delegate(), где вы переносите нагрузку с первоначального связывания на всплывающее событие (что происходит в любом случае), например:

$('div.abundant_class').live('click', function() {
  foo();
});

Это связывает один обработчик события с document и прослушивает событие click с всплывающим и действует на это, если элемент, из которого всплыло событие, соответствует селектору .

Согласно комментарию, вот очень оптимизированная версия:

$(document.body).delegate('div.abundant_class', 'click', function() {
  foo();
});