Question

我需要将处理程序绑定到页面上多个元素上的click事件，并将该元素的值发送给其他函数，但是会想到一些问题。

通过使用.each并将处理程序绑定到每个不同的元素，或者仅使用.on()函数将它们全部绑定，我可以实现相同的效果。后一种方法需要较少的显式方法调用，但它实际上更快，或者工作只是简单地转移到jQuery？

这是我上面所说的精简版：

<div class="el">a</div>
<div class="el">b</div>
<div class="el">c</div>
<div class="el">d</div>

<script>
// Scenario 1
$('.el').on('click', function() {
    doSomething();
});
// Scenario 2
$('.el').each(function() {
    $(this).on('click', function() {
        doSomething();
    });
});
</script>

jQuery是否在幕后做同样的事情？或者他们正在做一些完全不同的事情？

Answer 1

$().on()本身会调用each，因此就结果而言，它几乎是一样的，区别在于您的方案2中，您调用each()然后{{1 }}，on()仍然会为您调用on()的每个对象调用each()。所以它是每次vs 1的5次调用所以它看起来像调用on()然后each()是多余的，因此直接调用on()应该更有效，但可能非常非常边缘方式。除非你有很多元素，否则我认为你不会看到那么大的差别。

你可以在jQuery源代码中看到，这是on()返回的内容：

on()

但在这种情况下，更有效的方法仍然是使用委托事件。像这样：

return this.each( function() {
            jQuery.event.add( this, types, fn, data, selector );
        });

您可以在这个小提琴中看到，我已将日志添加到$(document).on('click', '.el', function(){console.log('delegated')});和on函数，以确切了解会发生什么。这是使用jQuery 2.0.2：

http://jsfiddle.net/d2vev3y0/

使用JQuery的.each和.on

1 个答案: