在性能方面使用.delete(）更好吗

Is it better to use .delegate() performance wise?

本文关键字：更好 delete 性能 方面使      更新时间：2023-09-26

与我共事的一位开发人员开始用这种方式编写所有代码：

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

vs：

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

这样做对性能有好处吗？

delegate()自jQuery 1.7起被取代。

请改用.on()。

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

正如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 );
};
...
});

是的，事实上，有一种更好的方法可以做到这一点，使用.on（）：看看这个

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

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

我很确定，如果在进行绑定时类"toggles"的所有项都存在，那么delegate（）的效率会降低。它绑定到类"toggles"的所有元素，然后，当单击其中一个元素时，检查所单击的实际DOM对象是否为输入。

另一方面，click（）是bind（）的快捷方式，它直接绑定到类"toggle"的所有内容，并总是在单击DOM项时触发。

使用delegate（）的唯一原因是，如果在进行绑定后在类"toggle"的项中添加输入。

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

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

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

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

当您单击<td>时，事件将冒泡到表格中。在这里，通过使用委托，我们可以减少事件处理程序的数量，从而提高性能。

在最新版本的jQuery中不推荐使用delegate。请使用.on，它的工作方式与delegate类似。

关于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处理程序来响应click事件。

相关文章：