Связанные события с элементами jQuery несколько раз имеют эффект стука?

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

Будет ли это мешать производительности или jQuery регистрирует события только один раз, даже если метод связывания называется многократно?

$(document).ready(function () {

    MonitorSerialTextBoxes();

    $('#newSerial').click(function () {

       $.tmpl("productTemplate", mymodel).insertAfter($(".entry").last());
       MonitorSerialTextBoxes();

    });

    function MonitorSerialTextBoxes() {
      $('.serial').each(function () {
         // Save current value of element
         $(this).data('oldVal', $(this).val());

         // Look for changes in the value
         $(this).bind("propertychange keyup input paste", function (event) {

         // If value has changed...
         if ($(this).data('oldVal') != $(this).val() && $(this).val().length == 10) {

             // Updated stored value
             $(this).data('oldVal', $(this).val());

             // Do action
         }
      });
    }

});

ОБНОВЛЕНИЕ: Я считаю, что это приведет к добавлению нижеприведенного кода в функцию MonitorSerialTextBoxes.

$('.serial').unbind("propertychange keyup input paste");

Из документации jQuery:

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

Ответ 1

Вы можете связать несколько обработчиков событий с одним элементом. Следующее создало бы кнопку с двумя событиями onclick:

$("button").bind("click", myhandler);
$("button").bind("click", myhandler);

Один из вариантов: сначала отвязать события:

$("button").unbind("click").bind("click", myhandler);
$("button").unbind("click").bind("click", myhandler);

Это приведет только к одному событию с привязкой кликов.

Если вы переписываете события, потому что ваша форма имеет динамически добавленные элементы, тогда вам может понадобиться заглянуть в live() или новый on(), который может связывать события с элементами, которые еще не существуют. Пример:

$("button").live("click", myhandler); // All buttons (now and in 
                                      // the future) have this handler.

В Инструментах разработчика Webkit (Safari и Chrome) вы можете увидеть, какие события связаны с элементом, проверив его, а затем прокручивая его в правой панели панели "Элементы". Он находится под упаковочной коробкой с именем "Слушатели событий". Firebug должен иметь аналогичную функциональность.

Ответ 2

Ну, я думаю, что это вызывает много накладных расходов и некоторые проблемы, потому что события привязаны более одного раза. Посмотрите на эту простую скрипту: http://jsfiddle.net/nicolapeluchetti/syvDu/

<button id='newSerial'>Button</button>
<div class='serial'>Serial</div>
<div class='serial'>Serial</div>
<div class='serial'>Serial</div>

MonitorSerialTextBoxes();

$('#newSerial').click(function() {
    MonitorSerialTextBoxes();

});

function MonitorSerialTextBoxes() {
    $('.serial').each(function() {


        // Look for changes in the value
        $(this).bind("click", function(event) {
            alert("hi");
        });
    });
}

При загрузке страницы при нажатии на div отображается один символ, но каждый раз, когда вы нажимаете кнопку, появляется еще одно предупреждение, потому что новое событие подключено