Question

我对每个功能都很困惑。

<html>
    <head>
        <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
        <script>
        $(document).ready(function(){
            //$(".a").click(function(){
            //  alert("hi");
            //});
            $(".a").each(function(){
                $(this).click(function(){
                    alert("hi");
                });
            });
        });
        </script>
    </head>
    <body>
    <div class="a">hi</div>
    <div class="a">hi</div>
    </body>
</html>

直接使用.click功能和使用.each之间有什么区别？它们都有效。

非常感谢。

修改

如果这两种方法相同，请举例说明为什么需要.each？

Answer 1

实际上这里有区别。使用.each，您可以在每次迭代中创建一个新函数，并且每个元素都会获得一个分配为事件处理程序的不同函数对象如果您在整个选择上调用.click，则情况并非如此。它将使用您传递给它的函数作为每个元素的事件处理程序。最终的行为是相同的。

在迭代元素之前，可以通过创建一个新的函数对象来避免创建它：

var handler = function(){
    alert("hi");
};
$(".a").each(function(){
    $(this).click(handler);
});

但没有必要这样做。 .click在内部调用.on，然后调用.each来迭代所选元素并绑定事件处理程序。

.each只是迭代元素并用它们做任何你想做的事情的通用方法。例如，您可能希望用另一个单词替换每个元素中的单词：

$('a').each(function() {
    $(this).text($(this).text().replace('foo', 'bar'));
});

这不是一个很好的例子，因为这里有一个更简洁的方法，但我希望它能给你一些想法。

为什么这两种方式之间存在性能差异？

外部.each调用是多余的，并增加了额外的开销。 “调用链”看起来与此类似：

each (1 time)
  -> callback (N times)
    -> click (1 time) (N times in total)
      -> on (1 time) (N times in total)
        -> each (1 time) (N times in total)
          -> callback (which ultimately adds the event handler) (1 time) (N times in total)

相比之下，这大致是您直接致电.click时发生的事情：

click (1 time)
  -> on (1 time)
    -> each (1 time)
      -> callback (which ultimately adds the event handler) (N times)

因此，不仅执行了更多的功能，而且执行了多次相同的功能（如.click nad .on）。每个函数可能会在每次调用时检查或初始化一次变量，所以很明显，如果多次调用它，则需要更多时间。

Answer 2

元素列表.click上的

($('selector').length > 1)通过jQuery内部循环以添加事件。

.each和.click只是由你完成..但是它会通过相同的jQuery迭代代码。

我更喜欢使用1st，因为它最适合你。

Answer 3

如果您遵循jquery源，则没有区别并且相同。因此，我建议您只使用click。

直接绑定和使用每个函数之间的区别

3 个答案: