Question

我与之合作的一位开发人员开始以这种方式编写所有代码：

$('.toggles').delegate('input', 'click', function() { 
   // do something  
});

VS

$('.toggles').click(function() { 
   // do something  
});

这样做是否有任何性能优势？

Answer 1

delegate()从jQuery 1.7开始被取代。

改为使用.on()。

.on()具有出色的性能基准。并涵盖您的.click()需求以及所需

Answer 2

正如frenchie所说，在最新版本的jQuery中，这两个函数最终映射到jQuery.on。

在jQuery代码中，您可以看到委托实际上只是on的包装器：

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

然后，当jQuery绑定click（以及其他事件）时，它也会调用on：

jQuery.each( ("... click ... ").split(" "), function( i, name ) {

// Handle event binding
jQuery.fn[ name ] = function( data, fn ) {
    if ( fn == null ) {
        fn = data;
        data = null;
    }

    return arguments.length > 0 ?
        this.on( name, null, data, fn ) :
        this.trigger( name );
};
...
});

Answer 3

是的，事实上，有一个更好的方法， .on（）：看看this

Answer 4

根据建议您可以使用.on()。就您的问题而言，.on()和.delegate()就此而言，其性能优于直接将事件绑定到目标。这是因为这些绑定器会侦听DOM树中较高的元素，然后检查目标，因为目标池增加.on()，.delegate()肯定会为您带来性能优势。

总的来说，他们总是会更有效率。

Answer 5

我非常确定如果在进行绑定时所有类“切换”都存在，那么该委托（）的效率会降低。它绑定到类“切换”的所有内容，然后，当单击其中一个元素时，检查所查看的实际DOM对象是否为输入。

另一方面，

click（）是bind（）的快捷方式，它直接绑定到类“toggle”的所有内容，并且在单击该DOM项时始终触发。

使用delegate（）的唯一原因是，在绑定完成后，如果在“toggle”类的项目中添加了输入。

这也适用于使用on（）的不同重载，它替换了delegate（）和bind（）（并且通过替换bind，也替换了click（））。

Answer 6

是的。使用.delegate将减少事件处理程序的数量。

假设您的页面中有一个表格，并且您希望将点击处理程序附加到每个<td>。而不是将事件处理程序附加到单个<td>，而是将其附加到表中：

$("#myTable").delegate("click", "td", function() {
    //do some thing on click of td
});

当您点击<td>时，该事件将冒泡到桌面。通过使用委托，我们可以减少事件处理程序的数量，从而提高性能。

在最新版本的jQuery使用.on中不推荐使用

委托，而是像委托一样工作。

Answer 7

关于on（旧版本中的委托）与点击的使用，你应该注意另外一个补充：

如果你这样做：

 $("a").click(function() {  
  alert("Click on link detected");  
  $(this).after("<a href='#'>New link</a>");  
});

您的新链接不会附加到“a”点击处理程序，即使它应该是因为它是一个链接。

但是如果您使用：

$("a").on("click", function(event){  
   $(this).after("<a href='#'>Nouveau lien</a>");  
});

使用此链接，新链接将使用单击处理程序响应click事件。

是否更好地使用.delegate（）性能？

7 个答案: