Czy lepiej jest używać funkcji .delegate()?

Question

Jeden z deweloperów, z którymi pracuję zaczął pisać cały jego kod w ten sposób:

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

vs:

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

Czy są jakieś korzyści wydajności do tej operacji?

Answer 1

delegate() jest zastępowany od wersji jQuery 1.7.

Zamiast tego należy użyć .on().

---

.on() ma doskonałe testy porównawcze wydajności. I obejmuje swoimi .click() potrzeb, jak również potrzebne

Answer 2

Tak, w rzeczywistości nie jest jeszcze lepszy sposób to zrobić, z .Na(): przyjrzeć this

Answer 3

jestem całkiem pewny że jeśli wszystkie elementy "przełączników" klas są obecne podczas wiązania, ten delegat() będzie mniej wydajny. Łączy się ze wszystkim klasami "przełączania", a następnie, gdy kliknie się jeden z tych elementów, sprawdza, czy rzeczywisty obiekt DOM jest klikany, to dane wejściowe.

Click() to skrót do bind(), który wiąże się bezpośrednio ze wszystkim klasą "toggle" i zawsze wyzwala się po kliknięciu tego elementu DOM.

Jedynym powodem użycia funkcji delegate() byłoby dodanie elementów wejściowych wewnątrz elementów klasy "toggle" po wykonaniu powiązania.

Dotyczy to również używania różnych przeciążeń funkcji on(), która zastępuje delegate() i bind() (i zastępując bind, zastępuje również click()).

Answer 4

Zgodnie z frenchie, w najnowszej wersji jQuery obie funkcje kończą się mapowaniem na jQuery.on.

W kodzie jQuery, można zobaczyć, że delegat jest naprawdę tylko otoki dla on:

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

Potem, kiedy jQuery wiąże click (a także innych imprez) to stawia pod on także:

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 5

Zgodnie z sugestią można użyć .on(). Jeśli chodzi o twoje pytanie, to w tym przypadku .on(), a także .delegate() ma lepszą wydajność niż zdarzenia wiążące bezpośrednio do celu. Dzieje się tak, ponieważ te elementy wiążące nasłuchują elementu znajdującego się wyżej w drzewie DOM, a następnie sprawdzają cel, ponieważ puli twoich celów wzrasta .on() i .delegate() z pewnością zapewni korzyści wydajności.

I na ogół zawsze będą bardziej wydajne.

Answer 6

Tak jest. Użycie numeru .delegate spowoduje zmniejszenie liczby procedur obsługi zdarzeń.

Załóżmy, że masz na swojej stronie tabelę i chcesz załączyć obsługę kliknięcia do każdego <td>. Zamiast dołączenie obsługi zdarzeń do indywidualnych <td> s dołączyć go do stołu:

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

Po kliknięciu na <td> zdarzenie będzie bańka do stołu. Tutaj za pomocą delegata możemy zmniejszyć liczbę programów obsługi zdarzeń, co poprawia wydajność.

Delegat jest przestarzały w najnowszej wersji jQuery use .on zamiast tego działa jak delegat.

Answer 7

Jest jeszcze jeden dodatek, który powinien mieć świadomość dotycząca wykorzystania na (delegata w starszych wersjach) vs kliknij:

jeśli to zrobić:

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

Twój nowy związek nie zostanie załączony do obsługi kliknięcia "a", chociaż powinno, ponieważ jest to link.

jednak jeśli używasz na:

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

ze ten nowy związek reaguje na zdarzenia click z obsługi kliknięcia.