Определение многих обработчиков событий JQuery "дорого"? Реализовано внутренне на уровне C / C ++ или JavaScript?

Question

У меня длинная веб-форма. Мне интересно, должен ли я связать () с каждым элементом отдельно (что я действительно хочу) или я должен определить только один bind () для всех элементов ввода, а затем выполнить if-then внутри обработчика для обработки конкретного элемента?

Answer 1

Обработчики событий jQuery реализованы на JavaScript (они должны быть).

Как правило, лучше всего использовать один обработчик для всей формы, а не большое количество отдельных элементов. Но функция jQuery live может очень помочь, она делает большую часть работы по делегированию событий для вас. Например:

$("#formid input").live('focus', function(event) {
    var field = $(this);
    // `field` now references the field that was focussed
});

... просматривает все поля в форме formid для событий фокуса. Если вы используете jQuery 1.4, это работает даже с событием focus в этом примере (даже если focus не всплывает, и поэтому обычно сложно использовать его с делегированием событий). До версии 1.4 это не сработало, но всплывающие события вроде click и тому подобное.

Answer 2

Я бы привязал ко всем входам, но вы можете использовать классы, чтобы сузить его до нужных вам входов.

Вместо

$("#formid input").click(function() { 
  if($(this).attr('something') == 'special_field') {
    //do A
  }
});

добавьте класс к интересующим вас элементам <input class='special_field' ... > и измените ваш селектор:

$("#formid input.special_field").click(function() { 
    //do A
});

Это ограничит обработчик только желаемыми элементами без каких-либо проверок оператора if.

Вы можете повторить это для всего, что требует специальной обработки.

Последнее замечание по методу .live(). Это может быть очень удобно по нескольким причинам:

1. На самом деле он не создает привязку для каждого соответствующего элемента, он по умолчанию создает прослушиватель для элемента body (вы можете выбрать другой элемент в качестве прослушивателя) и ожидает, пока даже не появится пузырек. Когда он пузырится, он проверяет сработавший элемент на селекторе, и если его совпадение запускает событие.
2. Поскольку селектор применяется при возникновении события, это означает, что новые элементы, добавленные через Javascript или AJAX, будут запускать код без необходимости их привязки или повторного связывания.
3. Существует один слушатель для многих элементов, что означает, что для больших наборов это может быть намного быстрее.