javascript - 多次将事件绑定(bind)到 jQuery 中的元素是否会产生链式 react ？

Question

如果我有下面的代码，如果多次按下新的串行按钮，类串行的文本框将多次绑定(bind)到事件。

这是否会影响性能，或者即使多次调用 bind 方法，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 文档:

If there are multiple handlers registered, they will always execute in the order in which they were bound

Answer 1

您可以将多个事件处理程序绑定(bind)到单个元素。以下将产生一个带有两个 onclick 事件的按钮:

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

一种选择是首先取消绑定(bind)事件:

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

这将导致只有一个绑定(bind)点击事件。

如果因为表单动态添加元素而重新绑定(bind)事件，那么您可能需要查看 live() 或新的 on()，它可以将事件绑定(bind)到可能尚不存在的元素。示例:

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

在 Webkit 开发人员工具(Safari 和 Chrome)中，您可以通过检查元素来查看绑定(bind)到元素的事件，然后在“元素”面板的右 Pane 中向下滚动。它位于名为“事件监听器”的可折叠框下。 Firebug 应该有类似的功能。