Question

我正在处理一个包含20列和100多行的网格。每列都有一个输入字段。现在我想将eventHandlers放在输入字段上，如change和keyup，focus等等。所以可以有20 * 100个事件= 2000！

最好的方法是什么？我已经阅读了有关eventHandlers和内存问题的内容。

我认为我应该这样做：

$("#grid input").each(function() {
    $(this).keyup(function() {
        // 
    });
    $(this).change(function() {
        // 
    });
});

或者这是最好的方法吗？

$("#grid").keyup(function() {
        // 
});

Answer 1

我建议使用事件委派，如下：

$("#grid").on("keyup", "input", function() {
   ...
});

您只需将一个添加到input，而不是为每个#grid添加一个监听器。

根据这个伟大的答案：What is DOM event delegation?

事件委派的另一个好处是事件侦听器使用的总内存占用量下降（因为事件绑定的数量会下降）。对于经常卸载的小页面（即用户经常导航到不同页面）可能没有多大区别。但对于长期存在的应用程序来说，它可能很重要。

当从DOM中删除的元素仍然声称存储器（即它们泄漏）时，存在一些非常难以跟踪的情况，并且这种泄漏的存储器通常与事件绑定相关联。通过事件委托，您可以自由地销毁子元素而不会忘记忘记＆＃34;解除绑定＆＃34;他们的事件监听器（因为监听器在祖先上）。然后可以包含这些类型的内存泄漏（如果没有消除，有时候很难做到.IE我在看着你）。

Answer 2

您正在寻找事件委派。

$("#grid").on("change", "input", function() {
    // Handle the event here, `this` refers to the input where it occurred
});

附加一个处理程序（在#grid上），只有当事件通过与第二个选择器匹配的元素传递时，jQuery才会触发。它调用处理程序就像处理程序附加到实际的input一样。甚至像focus这样不会原生泡沫的事件也会通过jQuery的机制得到支持。

更多the on documentation。

jQuery应用eventhandlers的最佳方法

2 个答案: