Лучше ли использовать функцию .delegate()?

Один из разработчиков, с которым я работаю, начал писать весь его код таким образом:

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

против

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

Есть ли преимущества в производительности для этого?

Ответы

Ответ 1

delegate() заменяется на jQuery 1.7.

Используйте .on() вместо этого.

.on() имеет отличные показатели производительности. И покрывает ваши потребности .click(), а также необходимые

Ответ 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 );
};
...
});

Ответ 3

Да, и на самом деле есть еще лучший способ сделать это: .on(): посмотрите это

Ответ 4

Как и было предложено, вы можете использовать .on(). Что касается вашего вопроса, .on(), а также .delegate() для этого имеет лучшую производительность, чем привязка событий к цели напрямую. Это связано с тем, что эти связующие прислушиваются к элементу, который выше в дереве DOM, а затем проверяет цель, поскольку пул ваших целей увеличивается .on() и .delegate(), несомненно, даст вам преимущество в производительности.

И вообще, они всегда будут более эффективными.

Ответ 5

Я уверен, что если все элементы класса "переключится" будут присутствовать при создании этой привязки, этот делегат() будет менее эффективным. Он привязывается ко всем классам "переключает", а затем, когда один из этих элементов щелкнут, проверяет, является ли текущий объект DOM объектом, является ввод.

click(), с другой стороны, является ярлыком для bind(), который привязывается непосредственно ко всему классу "переключение" и всегда срабатывает при нажатии этого элемента DOM.

Единственная причина использования функции delegate() заключается в том, что после добавления привязки внутри элементов класса "переключать" добавляются.

Это также относится к использованию разных перегрузок функции on(), которая заменяет функции delegate() и bind() (и заменяет bind, также заменяет click()).

Ответ 6

Да, это так. Использование .delegate уменьшит количество обработчиков событий.

Предположим, у вас есть таблица на вашей странице, и вы хотите присоединить обработчик кликов к каждому <td>. Вместо привязки обработчика события к индивидуальному <td> присоедините его к таблице:

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

Когда вы нажмете на <td>, событие запустится до таблицы. Здесь, используя делегат, мы можем уменьшить количество обработчиков событий, что улучшает производительность.

делегат устарел в последней версии использования jQuery .on, а работает как делегат.

Ответ 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 с помощью обработчика кликов.