Question

我有使用angular和jquery的经验。在jquery中，我经常使用这样的选择器：

     <input name="name" class="cls">
     <input name="age" class="cls">

     $('.cls').change(function(){ });

我的问题是如何通过jquery实现。它是如何知道输入值何时发生变化的。当jquery遇到这个选择器时，它是否会转到包含它的所有类并添加onchange事件以使html像这样？

     <input name="name" class="cls" onchange="func_ref()">
     <input name="age" class="cls" onchange="func_ref()">

知道这将有助于我更好地优化前端javascript。最近我了解到Angular真的很神奇但却以性能为代价。

Answer 1

当jquery遇到这个选择器时，它会转到所有类包含这个并添加onchange事件以使html像这样？

是change事件附加到具有选择器class的所有元素;虽然onchange="func_ref()"未插入html。内部处理程序func_ref this引用发生DOM事件的change元素。

Answer 2

是的，$('.cls').change(function() { /* ... */ })将获取当前已应用类cls的所有元素并将事件侦听器附加到它们，尽管它是通过addEventListener执行的，而不是通过添加属性。

如果你有很多元素，有时你可以避免附加大量的事件监听器。也就是说，由于事件冒泡，对于某些事件，您可以将事件侦听器添加到公共父元素，并且浏览器负责从实际的原始元素向上冒泡事件。 jQuery提供了一种方便的方式来利用这种机制，同时仍然选择你关心的原始元素，如下所示：

$('#container').on('change', '.cls', function() { /* ... */ });

...其中实际将一个监听器附加到#container，但就像你为匹配.cls的所有元素添加了一个监听器一样。