javascript - jQuery:每个 "each"项都需要一个 "click"吗？

Question

有

/* 1 */
$("div").click(function(e) {
  alert(".click() called on '" + e.currentTarget.id + "'");
});

/* 2 
$("div").each(function(){
    $(this).click(function(e) {
      alert(".click() called on '" + e.currentTarget.id + "'");
    });
});
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="target 1">
  The Target One
</div>
<div id="other 2">
  The Target TWO
</div>

1和2这两个函数有什么区别，知道结果一样吗？!...

Answer 1

对于将事件处理程序简单地附加到一堆元素的用例，两种解决方案之间没有区别。

下面是这两种方法的更多细节:

JQuery 的each 等同于Array.prototype.forEach .它使您可以选择遍历数组的每个元素(或更一般地说 - 集合)。通常它用于执行上下文相关的函数(对输入集合的不同元素执行特定的操作)。在您的示例 2 中，您可以插入一个 if 子句以排除某些 div 元素接收点击处理程序或执行其他操作，这不应该进入事件处理程序。

选项 1 是附加事件处理程序的直接方法。由于在 native javascript 中您无法选择一次定位多个元素(然而这是一个非常常见的用例)，您必须“手动”迭代 HTML 元素集合。然而，这不是最简单的任务，因为返回的 NodeList过去没有一种简单的方法来迭代它的元素*。 vanilla js 中常用的做法是借用 Array 原型(prototype)的迭代函数，造出这样一个怪物:

Array.prototype.forEach.call(document.querySelectorAll("element"),
    function(element){element.addEventListener("type",
       function(){/* code */}
    )}
);

jQuery 通过简单地接受元素集合并在后台遍历集合并将事件处理程序附加到每个元素来简化此操作。

$("element").on("type(s)",function(){/* code */})

甚至更简单

$("element").<type>(function(){/* code */})

* 不久前为 NodeLists 添加了一个 interator 函数，但仍然没有全局支持。