Question

我一直这样做：

$('#id').on('click',function(e){myFunction(var1,var2);});

function myFunction(x,y){blah blah blah}

我想改变这个：

$('#id').on('click',function(e){blah blah blah});

如果我使用大量不同的DOM元素执行此操作，我是否会消耗更多的内存空间，因为我将myFunction占用的空间与每个闭包相乘？或者只是使用指针？

Answer 1

第一个代码具有重用的优点，但缺点是定义匿名函数只是为了调用实际函数。如果真的很重要，那么额外的功能就是开销。

第二个将占用更少的内存，因为您只传递一个函数。函数也通过引用传递。这意味着此函数可以存储一次并由许多不同的调用者调用。

但是，您附加它的方式也会影响性能。如果你这样做：

$('#id1').on('click',function(e){myFunction(var1,var2);});
$('#id2').on('click',function(e){myFunction(var1,var2);});

这个调用jQuery 4次（2 $()和2 on()），创建2个匿名函数并调用两次外部函数。 count：6个调用，3个函数只是为了执行你的操作（不包括内部jQuery调用）。

$('#id1').on('click',function(e){blah blah blah});
$('#id2').on('click',function(e){blah blah blah});

如果你这样做，该函数不再可重用，但你有4次调用jQuery，2个函数，但你重复代码。从干旱的角度来看并不好。

$('#id1, #id2').on('click',function(e){blah blah blah});

这一个，你有2个电话和1个功能。这个更好。

$('#id1, #id2').on('click',function(e){myFunction(var1,var2);});

你也可以这样做，这个功能可以通过牺牲一个额外的匿名函数和调用来重复使用。 count：3个电话，2个电话。

您可以通过将处理程序附加到“最近的公共父级”来利用.on的强大功能，最接近使得气泡不会向上移动很远。相比之下，live()将事件附加到document，使得处理程序甚至可用于新元素。但附加到document使得深层嵌套元素非常有用。

$('nearest_common_parent').on('click','dynamic_element',function(){
    //do stuff
});

Answer 2

我认为你的第二种方法按照惯例是正确的。特别是，由于第一个，您无法访问$(this)

您必须将其作为var

传递

$('#test').on('click', function(e) {myFunction($(this), e, other_vars)});

VS

$('test').on('click', function(e) {
  e.preventDefault();
  var $this = $(this);
  //yadda yadda
});

它确实使您的代码更具可读性。我知道我没有回答实际的问题，但我认为这些是正确编写函数的正当理由。

Answer 3

当主要使用id时，Joseph的答案是一个很好的解释。但是，如果您是选择器的类或标记名称，则最好利用on函数的selector参数。例如：

  $('#page-wrap').on('hover', 'a', function() {
    // do something
  });

仅创建一个绑定到#page-wrap元素，但会在其中的任何a元素上触发。它在内存使用和设置速度方面更好，特别是如果你绑定了很多元素。