Я просто написал функцию $(). bind ('event'), а затем был обеспокоен тем, что этот вид вызова может быть очень дорогим, если jQuery должен запускать каждый элемент в DOM для привязки этого события.
Или, может быть, это примерно так же эффективно, как и событие. Документы jQuery, которые я прочитал, не делают этого ясно. Любые мнения?
Есть две вещи, которые могут сделать ваш код привязки событий медленным: селектор и # привязок. Наиболее важным из них является # привязок, но селектор может повлиять на вашу начальную производительность.
Что касается селекторов, просто убедитесь, что вы не используете чистые селектор классов, например .myclass. Если вы знаете, что класс myclass всегда будет находиться в элементе <div>, сделайте селектор div.myclass, так как это поможет jQuery быстрее найти соответствующие элементы. Кроме того, не используйте bestange jQuery, чтобы дать вам огромные селекторные строки. Все, что он может сделать с помощью селекторов строк, которые он также может выполнять с помощью функций, и это преднамеренно, поскольку это (как минимум, по общему признанию) быстрее сделать это таким образом, поскольку jQuery не нужно сидеть, чтобы проанализировать вашу строку, чтобы выяснить, что вы хотите. Поэтому вместо $('#myform input:eq(2)'); вы можете сделать $('input','#myform').eq(2);. Указав контекст, мы также не создаем jQuery в любом месте, где это не нужно, что намного быстрее. Подробнее об этом здесь.
Что касается количества привязок: если у вас есть относительно средний размер элементов, тогда вы должны быть в порядке - все до 200, 300 возможных совпадений элементов будут отлично работать в современных браузерах. Если у вас есть больше, чем это, вы можете вместо этого взглянуть на делегирование событий.
Что такое Event Delegation? По сути, когда вы запускаете такой код:
$('div.test').click(function() {
doSomething($(this));
});
jQuery делает что-то вроде этого за кулисами (привязывает событие для каждого совпадающего элемента):
$('div.test').each(function() {
this.addEventListener('click', function() {
doSomething(this);
}, false);
});
Это может стать неэффективным, если у вас есть большое количество элементов. При делегировании событий вы можете сократить количество привязок, сделанных до одного. Но как? Объект события имеет свойство target, которое позволяет вам узнать, на каком элементе действовало событие. Поэтому вы могли бы сделать что-то вроде этого:
$(document).click(function(e) {
var $target = $(e.target);
if($target.is('div.test')) { // the element clicked on is a DIV
// with a class of test
doSomething($target);
}
});
К счастью, вам действительно не нужно кодировать выше с помощью jQuery. Функция live, которая рекламируется как простой способ привязки событий к элементам, которые еще не существуют, на самом деле может это сделать используя делегирование событий и проверку на момент выполнения действия, если цель соответствует указанному вами селектору. Конечно, это имеет побочный эффект, очень удобный, когда скорость важна.
Мораль истории? Если вас беспокоит количество привязок, ваш script просто заменил .bind на .live и убедитесь, что у вас есть интеллектуальные селектор.
Обратите внимание, однако, что не все события поддерживаются .live. Если вам что-то не поддерживается, вы можете проверить плагин livequery, который живет на стероидах.
В принципе, вы не собираетесь делать ничего лучше. Все, что он делает, это вызвать attachEventListener() для каждого из выбранных вами элементов.
В разное время разбора этот метод, вероятно, быстрее, чем установка встроенных обработчиков событий для каждого элемента.
Как правило, я считаю, что это очень недорогая операция.