jQuery.click () vs onClick

Aby uzyskać lepszą wydajność, użyj natywnego JavaScript. Dla szybszego rozwoju użyj jQuery. Sprawdź porównanie wydajności w wydajność jQuery vs Native Element.

Zrobiłem test w Firefoksie 16.0 32-bit NA Windows Server 2008 R2 / 7 64-bit

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

Dla zdarzeń kliknięć, sprawdź natywne zdarzenia przeglądarki vs jQuery trigger lub jQuery vs Native Click event Binding.

Testowanie w Chrome 22.0.1229.79 32-bit na Windows Server 2008 R2 / 7 64-bit

$('#jquery a').click(window.testClickListener); // 2,957 operations/second

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
    el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second

Z tego co rozumiem, twoje pytanie nie dotyczy tego, czy używać jQuery, czy nie. Jest to raczej: czy lepiej wiązać zdarzenia inline w HTML lub poprzez słuchacze zdarzeń?

Wiązanie Inline jest przestarzałe. Ponadto w ten sposób można powiązać tylko jedną funkcję z określonym zdarzeniem.

Dlatego polecam korzystanie ze słuchaczy zdarzeń. W ten sposób będziesz mógł powiązać wiele funkcji z jednym zdarzeniem i w razie potrzeby odłączyć je później. Rozważ ten czysty JavaScript kod:

querySelector('#myDiv').addEventListener('click', function () {
    // Some code...
});

Działa to w większości nowoczesnych przeglądarek.

Jeśli jednak już włączyłeś jQuery do swojego projektu-po prostu użyj funkcji jQuery: .on lub .click.

$('#myDiv').click jest lepszy, ponieważ oddziela kod JavaScript od HTML . Należy starać się, aby Strona zachowywała się inaczej i miała inną strukturę . To bardzo pomaga.

Możesz je połączyć, użyj jQuery, aby powiązać funkcję z kliknięciem

<div id="myDiv">Some Content</div>

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

Zrób to, ponieważ zapewni Ci to zarówno standard, jak i wydajność.

 $('#myDiv').click(function(){
      //Some code
 });

Ponieważ druga metoda jest prostym kodem JavaScript i jest szybsza niż jQuery. Ale tutaj wydajność będzie w przybliżeniu taka sama.

IMHO, onclick jest preferowaną metodą .kliknij tylko wtedy, gdy spełnione są następujące warunki:

• na stronie jest wiele elementów
• tylko jedno wydarzenie do rejestracji dla zdarzenia click
• martwisz się o wydajność urządzeń mobilnych / żywotność baterii

Sformułowałem tę opinię ze względu na fakt, że silniki JavaScript na urządzeniach mobilnych są 4 do 7 razy wolniejsze niż ich odpowiedniki stacjonarne, które zostały wykonane w tej samej generacji. Nienawidzę kiedy odwiedź witrynę na moim urządzeniu mobilnym i odbieraj jittery przewijanie, ponieważ jQuery wiąże wszystkie zdarzenia kosztem mojego doświadczenia użytkownika i żywotności baterii. Kolejny niedawny czynnik wspierający, chociaż powinien to być tylko problem z agencjami rządowymi;), mieliśmy wyskakujące okienko IE7 z komunikatem informującym, że proces JavaScript trwa długo...poczekaj lub Anuluj proces. Działo się to za każdym razem, gdy było wiele elementów do powiązania przez jQuery.

Różnica w pracach. Jeśli użyjesz metody click (), możesz dodać kilka funkcji, ale jeśli użyjesz atrybutu, zostanie wykonana tylko jedna funkcja - ostatnia.

DEMO

HTML

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

JavaScript

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )

Jeśli mówimy o wydajności, w każdym przypadku bezpośrednie użycie jest zawsze szybsze, ale użycie atrybutu, będzie można przypisać tylko jedną funkcję.

Oddzielenie obaw jest tutaj kluczowe, a więc Wiązanie zdarzeń jest ogólnie przyjętą metodą. Jest to w zasadzie to, co wiele istniejących odpowiedzi powiedział.

Jednak nie odrzucaj idei deklaratywnych znaczników zbyt szybko. Ma swoje miejsce, a z frameworkami takimi jak Angularjs, jest centralnym punktem.

Musi być zrozumienie, że całość <div id="myDiv" onClick="divFunction()">Some Content</div> została tak mocno zawstydzona, ponieważ była nadużywana przez niektórych deweloperów. Dotarło więc do punktu świętokradcze proporcje, podobnie jak tables. Niektórzy programiści w rzeczywistości unikają tables dla danych tabelarycznych. To doskonały przykład ludzi, którzy zachowują się bez zrozumienia.

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Żaden z nich nie jest lepszy , ponieważ mogą być używane do różnych celów. onClick (właściwie powinno być onclick) działa nieco lepiej, ale wątpię, czy zauważysz tam różnicę.

Warto zauważyć, że robią one różne rzeczy: .click mogą być powiązane z dowolną kolekcją jQuery, podczas gdy {[1] } muszą być używane inline na elementach, z którymi mają być powiązane. Możesz również powiązać tylko jedno zdarzenie używając onclick, podczas gdy .click pozwala kontynuować Wiązanie wydarzenia.

Moim zdaniem, byłbym konsekwentny i po prostu używałbym .click wszędzie i trzymałbym cały mojego kodu JavaScript razem i oddzielony od HTML.

Nie używaj onclick. Nie ma żadnego powodu, aby go używać, chyba że wiesz, co robisz, a prawdopodobnie nie wiesz.]}

<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

Onclick, onmouseover, onmouseout itp.zdarzenia są rzeczywiście złe dla wydajności (w Internet Explorer głównie, go rysunek). Jeśli kodujesz za pomocą Visual Studio , po uruchomieniu strony z nimi, każda z nich utworzy oddzielny blok skryptów, który zajmie pamięć, a tym samym spowalnia wydajność.

Nie wspominając o tym, że powinieneś mieć oddzielenie obaw : JavaScript i layouty powinny być oddzielone!

Jest zawsze lepiej tworzyć evenhandlery dla każdego z tych zdarzeń, jedno zdarzenie może przechwycić setki / tysiące elementów, zamiast tworzyć tysiące oddzielnych bloków skryptu dla każdego z nich!

(również wszystko, co wszyscy inni mówią.)

Cóż, jedną z głównych idei jQuery jest oddzielenie JavaScript od paskudnego kodu HTML. Pierwsza metoda to droga do zrobienia.

Przez większość czasu natywne metody JavaScript są lepszym Wyborem niż jQuery, gdy wydajność jest jedynym kryterium, ale jQuery korzysta z JavaScript i ułatwia rozwój. Możesz użyć jQuery, ponieważ nie pogarsza to zbytnio wydajności. W twoim konkretnym przypadku różnica w wydajności jest ignorowalna.

Pierwszą metodą użycia onclick nie jest jQuery, ale po prostu Javascript, więc nie masz narzutu jQuery. Sposób jQuery można rozszerzyć za pomocą selektorów, jeśli chcesz dodać go do innych elementów bez dodawania obsługi zdarzeń do każdego elementu, ale jak już to masz, jest to tylko pytanie, czy musisz używać jQuery, czy nie.

Osobiście, ponieważ używasz jQuery, trzymałbym się go, ponieważ jest spójny i nie oddziela znaczników od skryptu.

Pierwszą metodą jest preferowanie. Wykorzystuje on model zaawansowanej rejestracji zdarzeń [S] , co oznacza, że możesz dołączyć wiele programów obsługi do tego samego elementu. Można łatwo uzyskać dostęp do obiektu event, a obsługa może działać w zakresie dowolnej funkcji. Jest również dynamiczny, tzn. może być wywoływany w dowolnym momencie i jest szczególnie odpowiedni dla dynamicznie generowanych elementów. To, czy korzystasz bezpośrednio z jQuery, innej biblioteki lub natywnych metod, nie ma znaczenia.

Drugi metoda, używając atrybutów inline, potrzebuje wielu globalnych funkcji (co prowadzi do zanieczyszczenia przestrzeni nazw) i miesza zawartość / strukturę (HTML) z zachowaniem (JavaScript). Nie używaj tego.

Na twoje pytanie dotyczące wydajności lub standardów nie można łatwo odpowiedzieć. Te dwie metody są zupełnie różne i robią różne rzeczy. Pierwszy z nich jest potężniejszy, a drugi jest pogardzany (uważany za zły styl).

Uruchom JavaScript po kliknięciu przycisku:

<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
</script>