直接绑定和使用各个函数的区别答案

【问题标题】：The difference between directly binding and using each function直接绑定和使用各个函数的区别
【发布时间】：2012-08-16 21:04:29
【问题描述】：

我真的对每个功能感到困惑。

JsFiddle

<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？

【问题讨论】：

没有区别（在这种情况下）。有时需要使用.each()，但在您的示例中没有。
@Pointy 你能举个例子吗？
在这种情况下， .each 是额外的工作，因为选择器已经遍历它，但是其他人已经声明的结果是相同的。
@ComboZhc 有必要使用.each() 的一个例子是，每个匹配元素的事件处理程序的性质可能不同，基于一些其他元素属性或其他东西。

标签： javascript jquery click each

【解决方案1】：

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

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

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

但没有必要这样做。 .click 在内部调用.on，而.each 又会调用.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）。每个函数可能会在每次调用一次时检查或初始化变量，因此很明显，如果你多次调用它，它会花费更多时间。

【讨论】：

如果内部.each不在每次迭代中创建一个新的事件处理程序，会做什么？
您能否详细说明.each 如何创建新的事件处理程序而.click 或.on 没有？
@Radu 的重点是只有一个 function 对象实例化，而不是每个元素的函数。
@Pointy 但在内部 .click 只需调用 .each 并实例化 function？
@ComboZhc right - 单个函数对象被实例化并传递给.click() 函数，它将用于所有元素。除了实例化了许多额外的功能之外，页面的行为将是相同的。

【解决方案2】：

元素列表中的.click ($('selector').length > 1) 在内部通过 jQuery 循环以添加事件。

.each 和 .click 由您完成。但随后会通过相同的 jQuery 迭代代码。

我更喜欢使用第一个，因为它更整洁。

【讨论】：

+1。此外，在这种情况下，它不仅更整洁，而且执行速度比使用每个方法快大约 25%：jsperf.com/click-vs-each-click（我知道它是毫秒，但无论如何都是性能的奖励）

【解决方案3】：

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

【讨论】：