1

Question

这些选项有什么区别？

1

$('[data-focus-link]').each( function() {
  var $this = $(this);
  var $focus_id = $this.attr('data-focus-link');

  $this.click( function() {
    $('#' + $focus_id).focus();
  });

});

2：

$(document).on('click', '[data-focus-link]', function() {
  var $this = $(this);
  var $focus_id = $this.attr('data-focus-link');

  $('#' + $focus_id).focus();

});

我应该关心使用什么吗？

Answer 1

使用$(document).on('click', '[data-focus-link]', function() { })在性能方面更好，如果您有许多要监听“点击”事件的项目，则会更加明显。它在document上创建仅1个事件侦听器，并将捕获的事件委托给选择器指定的元素（例如[data-focus-link]）。

$('[data-focus-link]').each(function() {})方法会创建 n ＃个事件侦听器，每个方法都指向您定义的匿名函数的副本：

function() {
    $('#' + $focus_id).focus();
}

进行测试并自行验证，尝试使用10,100,1000,10000个元素，然后使用.each()方法会看到性能急剧下降。

Answer 2

如果绑定到单击，则在删除元素并读取它（或添加新元素）后，将不会绑定。

当您使用 on 时，它会检查父（文档）中的所有元素，因此添加元素时没有区别。

Answer 3

不同之处在于，在第一种情况下，您正在遍历DOM中已经存在的元素，并且没有任何用户交互。

在第二种情况下，你会做同样的事情但是，在点击事件中，你将遍历元素，包括动态添加的元素

jQuery each（）vs on on（）

1

2：

3 个答案: