Różnica między .on („kliknięcie”) a .click ()

526

Czy jest jakaś różnica między następującym kodem?

$('#whatever').on('click', function() {
     /* your code here */
});

i

$('#whatever').click(function() {
     /* your code here */
});

jquery click bgcode
źródło

761

Myślę, że różnica polega na wzorcach użytkowania.

Wolałbym .onponad .clickponieważ były może zużywać mniej pamięci i pracy w dynamicznie dodanych elementów.

Rozważ następujący HTML:

<html>
    <button id="add">Add new</button>
    <div id="container">
        <button class="alert">alert!</button>
    </div>
</html>

gdzie dodajemy nowe przyciski za pomocą

$("button#add").click(function() {
    var html = "<button class='alert'>Alert!</button>";
    $("button.alert:last").parent().append(html);
});

i chcesz „Alert!” pokazać ostrzeżenie. Możemy użyć do tego „kliknięcia” lub „włączenia”.

Kiedy korzystamy `click`

$("button.alert").click(function() {
    alert(1);
});

z powyższym, dla każdego elementu pasującego do selektora tworzony jest osobny moduł obsługi . To znaczy

wiele pasujących elementów stworzyłoby wiele identycznych programów obsługi, a tym samym zwiększyłoby powierzchnię pamięci
elementy dodawane dynamicznie nie będą miały modułu obsługi - tj. w powyższym pliku HTML nowo dodany komunikat „Alert!” Przyciski nie będą działać, chyba że ponownie powiążesz moduł obsługi.

Kiedy korzystamy `.on`

$("div#container").on('click', 'button.alert', function() {
    alert(1);
});

z powyższym, jeden moduł obsługi dla wszystkich elementów pasujących do selektora, w tym tych tworzonych dynamicznie.

... kolejny powód do użycia `.on`

Jak skomentował poniżej Adrien, kolejnym powodem użycia .onsą zdarzenia z przestrzenią nazw.

Jeśli dodasz moduł obsługi .on("click", handler), zwykle usuń go, za pomocą .off("click", handler)którego usuniesz ten moduł. Oczywiście działa to tylko wtedy, gdy masz odniesienie do funkcji, więc co jeśli nie? Korzystasz z przestrzeni nazw:

$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });

z niewiązaniem przez

$("#element").off("click.someNamespace");

andreister
źródło

2

Co z: $ („button.alert”). On („click”, function () {alert (1);}); ?

Matthew

8

@ andreister: popraw mnie, jeśli się mylę, ale uważam, że kolejną zaletą jest użycie przestrzeni nazw podczas korzystania on('click' ...), patrz stackoverflow.com/a/3973060/759452 tj. on('click.darkenallothersections' ...)i jednocześnie mam on('click.displaynextstep' ...), to mogę cofnąć wiązanie tylko tego, którego wybrałem.unbind('click.displaynextstep')

Adrien Be

Nie sądzę, że dla każdego elementu pasującego do selektora tworzony jest osobny moduł obsługi. Myślę, że zostałby utworzony 1 moduł obsługi, ale narzut wynika z powiązania tego modułu z wieloma elementami i monitorowania wszystkich tych elementów. Przynajmniej nie znalazłem tego w dokumentacji.

Śledź

7

Czy ktoś może wyjaśnić, dlaczego .on może działać dla dynamicznie dodawanego elementu, ale .click nie?

MengT

2

on()jest trendem w jQuery. Musiałem aktualizacji $(window).load(function() {});do $(window).on("load", function (e) {})kiedy uaktualniony do jQuery 3.

Victor Stoddard

37

Czy jest jakaś różnica między następującym kodem?

Nie, nie ma różnicy funkcjonalnej między dwiema próbkami kodu w twoim pytaniu. .click(fn)jest „metodą skrótu” dla .on("click", fn). Z dokumentacji dla.on() :

Istnieją skrócone metody dla niektórych zdarzeń, takich jak te, .click()które można wykorzystać do dołączania lub wyzwalania programów obsługi zdarzeń. Aby uzyskać pełną listę metod skróconych, zobacz kategorię zdarzeń .

Należy zauważyć, że .on()różni się od .click()tego, że ma możliwość tworzenia delegowanych procedur obsługi zdarzeń poprzez przekazanie selectorparametru, podczas .click()gdy nie. Gdy .on()jest wywoływany bez selectorparametru, zachowuje się dokładnie tak samo jak .click(). Jeśli chcesz delegować wydarzenie, użyj .on().

gilly3
źródło

4

co z problemem wydajności wskazał mój @andreister?

rubo77

@ rubo77 w najlepszym razie nieistotny. Bierzemy jednocyfrowe milisekundy.

Rory McCrossan

1

@RoryMcCrossan to dla mnie wielka sprawa - szukam tego, ponieważ mam do 3000 pytań na stronie, które wymagają wydarzeń. Jeden milisek sprawia, że wykonanie mojej strony zajmuje 3 sekundy. Twój komentarz nie jest pomocny w przypadku dużych list.

Randy

11

Większy problem polega na tym, że masz 3000 pytań na stronie. Jeśli przestrzegasz dobrych wzorców interfejsu użytkownika, nigdy nie powinieneś mieć takiej ilości informacji na stronie. Zajrzyj do stronicowania lub leniwego ładowania. Lepiej byłoby nawet użyć delegowania zdarzeń, aby mieć jedną procedurę obsługi zdarzeń dla wszystkich tych elementów.

Rory McCrossan

5

@ rubo77 - Wzrost wydajności jest widoczny tylko podczas korzystania z delegowania zdarzeń przez przekazanie selectorparametru. Jeśli dzwonisz .on()bez selectorparametru, nie ma poprawy wydajności w porównaniu z użyciem .click().

gilly3

23

.on()jest zalecanym sposobem wykonania wszystkich powiązań zdarzeń od jQuery 1.7. To rzuca całą funkcjonalność zarówno .bind()i .live()do jednej funkcji, która zmienia zachowanie jak przekazać mu różne parametry.

Jak napisałeś swój przykład, nie ma między nimi żadnej różnicy. Oba wiążą moduł obsługi z clickzdarzeniem #whatever. on()oferuje dodatkową elastyczność, pozwalając na delegowanie zdarzeń uruchamianych przez dzieci z #whateverjednej funkcji modułu obsługi, jeśli wybierzesz.

// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });

Interrobang
źródło

„Powiąż wszystkie linki wewnątrz # cokolwiek, nawet nowe utworzone później”. Czy to nie dokładnie to, co .live()robi? Wydaje się to również sprzeczne z innymi odpowiedziami, które mówią, że ma on jedynie funkcjonalność .click(), a zatem nie dotyczy przyszłych wydarzeń.

bgcode

3

@babonk - To nie jest sprzeczne z innymi odpowiedziami, ponieważ, jak powiedział Interrobang w pierwszym akapicie, .on()może robić to, co .click()robi, i robić .bind()i .live()robić - to zależy od parametrów, które wywołujesz. (Niektóre inne odpowiedzi też o tym wspominały.) Zauważ jednak, że „Powiązanie ze wszystkimi linkami w #cokolwiek” nie jest tym .live(), co robi, ale tym, co .delegate()robi. .live()wiąże się ze wszystkimi wewnątrz, documenta nie pozwala określić kontener. Uwaga .live()jest również przestarzała od wersji jQuery 1.7.

nnnnnn

+1 dla zdarzeń delegowanych: „Wybierając element, który gwarantuje obecność w momencie dołączenia procedury obsługi zdarzeń delegowanych, możesz użyć zdarzeń delegowanych, aby uniknąć konieczności częstego dołączania i usuwania procedur obsługi zdarzeń”. api.jquery.com/on

jimasp

19

Jak wspomniano w innych odpowiedziach:

$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })

Zwraca jednak uwagę, że .on()obsługuje kilka innych kombinacji parametrów, .click()co nie pozwala na obsługę delegowania zdarzeń (zastępowanie .delegate()i .live()).

(I oczywiście istnieją inne podobne metody skrótów do „keyup”, „focus” itp.)

Powód, dla którego wysyłam dodatkową odpowiedź, to wspomnienie, co się stanie, jeśli zadzwonisz .click()bez parametrów:

$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");

Zauważ, że jeśli używasz .trigger()bezpośrednio, możesz również przekazać dodatkowe parametry lub obiekt zdarzenia jQuery, z którym nie możesz tego zrobić .click().

Chciałem również wspomnieć, że jeśli spojrzysz na kod źródłowy jQuery (w jquery-1.7.1.js), zobaczysz, że wewnętrznie funkcja .click()(lub .keyup()itp.) Faktycznie wywoła .on()lub .trigger(). Oczywiście oznacza to, że możesz mieć pewność, że naprawdę mają ten sam wynik, ale oznacza to również, że używanie .click()ma nieco więcej kosztów ogólnych - nie martw się ani nawet nie myśl o większości przypadków, ale teoretycznie może to mieć znaczenie w wyjątkowych okolicznościach.

EDYCJA: Na koniec zauważ, że .on()pozwala powiązać kilka zdarzeń z tą samą funkcją w jednym wierszu, np .:

$("#whatever").on("click keypress focus", function(){});

nnnnnn
źródło

Czy obie metody załadowane do pamięci nie są używane? Więc to nie ma znaczenia? A dla czytelności może to być wygodniejsze?

Vince V.

@VinceV. - Tak. W przypadku „standardowych” nieprzedstawionych procedur obsługi zdarzeń obie metody robią to samo, a różnica w wydajności jest nieistotna, dlatego zastosowana metoda jest kwestią osobistych preferencji. (Zwykle wybrałbym .click().)

nnnnnn

9

Nie, nie ma.
Chodzi o on()inne przeciążenia i zdolność do obsługi zdarzeń, które nie mają metod skrótów.

SLaks
źródło

1

@arigold: To są inne przeciążenia.

SLaks,

9

Wydają się być takie same ... Dokumentacja z funkcji click () :

Ta metoda jest skrótem do .bind („kliknięcie”, moduł obsługi)

Dokumentacja z funkcji on () :

Począwszy od jQuery 1.7, metoda .on () zapewnia wszystkie funkcje wymagane do dołączania procedur obsługi zdarzeń. Aby uzyskać pomoc w konwersji starszych metod zdarzeń jQuery, zobacz .bind (), .delegate () i .live (). Aby usunąć zdarzenia powiązane z .on (), zobacz .off ().

dana
źródło

Oba twoje poglądy powinny zostać połączone. Click () to skrót do .Bind () i .On () ... Zgodnie z JQUERY 1.7.0 + jest to również skrót do Trigger („click”). [ api.jquery.com/click/]

Dhanasekar

Jest to dość proste wytłumaczenie z dokumentów, ale poniższa odpowiedź ma dobry przykład, dlaczego jedno jest lepsze od drugiego w .clickvs.on

phatskat

@phatskat - akurat się z tobą zgadzam :)

dana

8

.click zdarzenia działają tylko wtedy, gdy element jest renderowany i są dołączane tylko do elementów ładowanych, gdy DOM jest gotowy.

.on zdarzenia są dynamicznie dołączane do elementów DOM, co jest przydatne, gdy chcesz dołączyć zdarzenie do elementów DOM, które są renderowane na żądanie ajax lub coś innego (gdy DOM jest gotowy).

Ramesh Kumar
źródło

5

Tutaj znajdziesz listę różnych sposobów zastosowania zdarzenia kliknięcia. Możesz wybrać odpowiednią opcję lub jeśli kliknięcie nie działa, po prostu wypróbuj alternatywę.

$('.clickHere').click(function(){ 
     // this is flat click. this event will be attatched 
     //to element if element is available in 
     //dom at the time when JS loaded. 

  // do your stuff
});

$('.clickHere').on('click', function(){ 
    // same as first one

    // do your stuff
})

$(document).on('click', '.clickHere', function(){
          // this is diffrent type 
          //  of click. The click will be registered on document when JS 
          //  loaded and will delegate to the '.clickHere ' element. This is 
          //  called event delegation 
   // do your stuff
});

$('body').on('click', '.clickHere', function(){
   // This is same as 3rd 
   // point. Here we used body instead of document/

   // do your stuff
});

$('.clickHere').off().on('click', function(){ // 
    // deregister event listener if any and register the event again. This 
    // prevents the duplicate event resistration on same element. 
    // do your stuff
})

Mustkeem K
źródło

3

Odtąd przestarzałe click (), więc najlepiej wybrać opcję („click”)

tw0shoes
źródło

Co więc robisz, jeśli chcesz teraz zachować stare kliknięcie ()?

bgcode

1

O ile się dowiedział z Internetu i niektórych przyjaciół .on () jest używany, gdy dodajesz dynamicznie elementy. Ale kiedy użyłem go na prostej stronie logowania, na której zdarzenie click powinno wysłać AJAX do node.js, a po powrocie dołączyć nowe elementy, zaczął on wywoływać połączenia wielu AJAX. Kiedy zmieniłem to na click () wszystko poszło dobrze. Właściwie nie spotkałem się wcześniej z tym problemem.

Alper Bilgil
źródło

0

NOWE ELEMENTY

Jako dodatek do wyczerpujących odpowiedzi powyżej, aby podkreślić kluczowe punkty, jeśli chcesz, aby kliknięcie dołączało do nowych elementów:

elementy wybrane przez pierwszy selektor, np. $ („body”), muszą istnieć w momencie składania deklaracji, w przeciwnym razie nie ma nic do dołączenia.
musisz użyć trzech argumentów w funkcji .on (), w tym prawidłowego selektora dla elementów docelowych jako drugiego argumentu.

Astra Bear
źródło

-1

$('.UPDATE').click(function(){ }); **V/S**    
$(document).on('click','.UPDATE',function(){ });

$(document).on('click','.UPDATE',function(){ });

jest bardziej skuteczny niż $ ('. UPDATE'). click (function () {});
może zużywać mniej pamięci i pracować dla dynamicznie dodawanych elementów.
niektóre dynamicznie pobierane dane z przyciskiem edycji i usuwania nie generują zdarzenia JQuery w czasie EDYCJI LUB USUWANIA DANYCH danych wiersza w formie, że czas $(document).on('click','.UPDATE',function(){ });działa skutecznie jak te same pobrane dane przy użyciu jquery. przycisk nie działa w momencie aktualizacji lub usuwania:

Devang Hire
źródło

$ (document) .on ('click', '. UPDATE', function () {}); 1) jest bardziej skuteczny niż $ ('. UPDATE'). Kliknij (function () {}); 2) może zużywać mniej pamięci i pracować dla dynamicznie dodawanych elementów. 3) niektóre dynamicznie pobierane dane z przyciskiem edycji i usuwania nie generują zdarzenia JQuery w czasie EDYCJI LUB USUWANIA DANYCH danych wiersza w formie, że $ (dokument) .on („kliknięcie”, „. AKTUALIZACJA”, funkcja () {}); jest efektywnie działający. [podobnie jak te same pobrane dane przy użyciu jquery. przycisk nie działa w momencie aktualizacji lub usuwania

Devang Zatrudnij

Różnica między .on („kliknięcie”) a .click ()

Odpowiedzi:

Kiedy korzystamy click

Kiedy korzystamy .on

... kolejny powód do użycia .on

Kiedy korzystamy `click`

Kiedy korzystamy `.on`

... kolejny powód do użycia `.on`