Różnica między .on („kliknięcie”) a .click ()
Odpowiedzi:
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");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')
on()jest trendem w jQuery. Musiałem aktualizacji $(window).load(function() {});do $(window).on("load", function (e) {})kiedy uaktualniony do jQuery 3.
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().
selectorparametru. Jeśli dzwonisz .on()bez selectorparametru, nie ma poprawy wydajności w porównaniu z użyciem .click().
.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() { ... });.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ń.
.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.
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(){});.click().)
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 ().
.clickvs.on
.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).
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
})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.
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.
$('.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:
