jQuery应用事件处理程序的最佳方式

我正在处理具有20列和100多行的网格。每列都有一个输入字段。现在我想把eventHandlers放在输入字段上，如change和keyup，focus，等等。所以可以有20 * 100个事件= 2000！jQuery应用事件处理程序的最佳方式

这样做的最好方法是什么？我读过关于eventHandlers和内存问题的一些信息。

这是我觉得我应该这样做：

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

或者这是做到这一点的最好方法是什么？

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

来源

2016-11-23 mr r.

您正在寻找事件代表团。

$("#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。

来源

2016-11-23 20:17:22

快速回答，+链接文档。感谢您成为冠军。 –

超级回答！紧凑和重点。 –

我建议使用事件代表团，就像这样：

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

而不是增加一个监听每input，你只需要添加一个向#grid。

按照这个伟大的答案：What is DOM event delegation?

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

当从DOM中移除的元素仍然声明内存（即它们泄露）时，有一些真正难以追踪的情况，并且这种泄漏的内存通常与事件绑定有关。通过事件代表团，您可以自由地销毁子元素，而无需忘记“解除绑定”他们的事件侦听器（因为侦听器位于祖先上）。这些类型的内存泄漏可以被包含（如果不能消除的话，这有时候很难做到，IE我在看你）。

来源

2016-11-23 20:16:50 Santi

jQuery应用事件处理程序的最佳方式

回答

相关问题