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

The difference between directly binding and using each function

本文关键字：函数 之间 区别 绑定      更新时间：2023-09-26

我对每个函数都感到困惑。

小提琴

<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您可以在每次迭代中创建一个新函数，并且每个元素都会获得一个不同的函数对象作为事件处理程序分配。
如果对整个选择调用.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(多次执行。每个函数每次调用可能会进行一次检查或初始化变量，因此显然，如果您多次调用它，则需要更多时间。

元素

列表上的.click ($('selector').length > 1)由 jQuery 在内部循环以添加事件。

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

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

没有区别，如果你遵循jquery源代码，它相当于同样的事情。因此，我建议使用简单的click。

相关文章：