jQuery.click () vs onClick

Ho una grande applicazione jQuery e sto usando i due metodi seguenti per gli eventi clic.

Primo metodo

HTML

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

jQuery

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

Secondo metodo

HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

Chiamata di funzione JavaScript

function divFunction(){
    //Some code
}

Uso il primo o il secondo metodo nella mia applicazione. Qual è il migliore? Meglio per le prestazioni? E standard?

L'uso $('#myDiv').click(function(){è migliore in quanto segue il modello standard di registrazione degli eventi. (jQuery utilizza internamenteaddEventListener e attachEvent).

Fondamentalmente la registrazione di un evento in modo moderno è il modo discreto di gestire gli eventi. Inoltre, per registrare più di un listener di eventi per la destinazione, è possibile chiamare addEventListener()per la stessa destinazione.

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

http://jsfiddle.net/aj55x/1/

Perché usare addEventListener? (Da MDN)

addEventListener è il modo per registrare un listener di eventi come specificato nel DOM W3C. I suoi benefici sono i seguenti:

• Consente di aggiungere più di un singolo gestore per un evento. Ciò è particolarmente utile per le librerie DHTML o le estensioni Mozilla che devono funzionare bene anche se vengono utilizzate altre librerie / estensioni.
• Ti dà un controllo più preciso della fase quando viene attivato l'ascoltatore (cattura vs. bolle)
• Funziona su qualsiasi elemento DOM, non solo su elementi HTML.

Ulteriori informazioni sulla registrazione moderna degli eventi -> http://www.quirksmode.org/js/events_advanced.html

Altri metodi come l'impostazione degli attributi HTML , ad esempio:

<button onclick="alert('Hello world!')">

O proprietà dell'elemento DOM , ad esempio:

myEl.onclick = function(event){alert('Hello world');}; 

sono vecchi e possono essere sovrascritti facilmente.

L'attributo HTML dovrebbe essere evitato in quanto rende il markup più grande e meno leggibile. Le preoccupazioni per contenuto / struttura e comportamento non sono ben separate, rendendo più difficile trovare un bug.

Il problema con il metodo delle proprietà dell'elemento DOM è che solo un gestore eventi può essere associato a un elemento per evento.

Ulteriori informazioni sulla gestione degli eventi tradizionali -> http://www.quirksmode.org/js/events_tradmod.html

Riferimento MDN: https://developer.mozilla.org/en-US/docs/DOM/event

Per prestazioni migliori, utilizzare JavaScript nativo. Per uno sviluppo più veloce, utilizzare jQuery. Controlla il confronto delle prestazioni su jQuery vs Native Element Performance .

Ho eseguito un test in Firefox 16.0 a 32 bit su Windows Server 2008 R2 / 7 a 64 bit

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

Per gli eventi clic, selezionare Eventi browser nativo vs trigger jquery o Associazioni evento jQuery vs clic nativo .

Test in Chrome 22.0.1229.79 a 32 bit su Windows Server 2008 R2 / 7 a 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

Da quello che ho capito, la tua domanda non riguarda davvero se usare jQuery o meno. È piuttosto: è meglio associare eventi in linea in HTML o tramite listener di eventi?

L'associazione incorporata è obsoleta. Inoltre in questo modo è possibile associare una sola funzione a un determinato evento.

Pertanto consiglio di utilizzare i listener di eventi. In questo modo, sarai in grado di associare molte funzioni a un singolo evento e di separarle in seguito, se necessario. Considera questo codice JavaScript puro:

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

Funziona con la maggior parte dei browser moderni.

Tuttavia, se includi già jQuery nel tuo progetto, usa semplicemente jQuery: .ono la .clickfunzione.

È possibile combinarli, utilizzare jQuery per associare la funzione al clic

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

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

function divFunction(){
 //some code
}

$('#myDiv').clickè meglio, perché separa il codice JavaScript da HTML . Bisogna cercare di mantenere il comportamento e la struttura della pagina diversi . Questo aiuta molto.

Prova questo perché ti offrirà sia standard che prestazioni.

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

Poiché il secondo metodo è semplice codice JavaScript ed è più veloce di jQuery. Ma qui le prestazioni saranno approssimativamente le stesse.

IMHO, onclick è il metodo preferito rispetto a .click solo quando sono soddisfatte le seguenti condizioni:

• ci sono molti elementi nella pagina
• solo un evento da registrare per l'evento click
• Sei preoccupato per le prestazioni mobili / la durata della batteria

Ho formulato questa opinione a causa del fatto che i motori JavaScript sui dispositivi mobili sono da 4 a 7 volte più lenti rispetto alle loro controparti desktop realizzate nella stessa generazione. Lo odio quando visito un sito sul mio dispositivo mobile e ricevo uno scrolling nervoso perché jQuery vincola tutti gli eventi a spese della mia esperienza utente e della durata della batteria. Un altro fattore di supporto recente, sebbene questo dovrebbe riguardare solo le agenzie governative;), abbiamo avuto IE7 pop-up con una finestra di messaggio che indica che il processo JavaScript sta impiegando molto tempo ... attendere o annullare il processo. Questo è successo ogni volta che c'erano molti elementi a cui legarsi tramite jQuery.

Differenza nelle opere. Se si utilizza click (), è possibile aggiungere diverse funzioni, ma se si utilizza un attributo, verrà eseguita solo una funzione, l'ultima.

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')" )

Se parliamo di prestazioni, in ogni caso l'utilizzo diretto è sempre più veloce, ma utilizzando un attributo, sarai in grado di assegnare una sola funzione.

La separazione delle preoccupazioni è la chiave qui, e quindi l'associazione di eventi è il metodo generalmente accettato. Questo è fondamentalmente ciò che molte delle risposte esistenti hanno detto.

Tuttavia , non buttare via l'idea del markup dichiarativo troppo rapidamente. Ha il suo posto, e con quadri come Angularjs, è il fulcro.

È necessario comprendere che il tutto è <div id="myDiv" onClick="divFunction()">Some Content</div>stato vergognato così pesantemente perché è stato abusato da alcuni sviluppatori. Quindi ha raggiunto il punto di proporzioni sacrileghe, molto simili tables. Alcuni sviluppatori in realtà evitano i tablesdati tabulari. È l'esempio perfetto di persone che agiscono senza capire.

Anche se mi piace l'idea di mantenere il mio comportamento separato dalle mie opinioni. Non vedo alcun problema con il markup che dichiara ciò che fa (non come lo fa, è un comportamento). Potrebbe essere sotto forma di un vero attributo onClick o di un attributo personalizzato, proprio come i componenti javascript di bootstrap.

In questo modo, guardando solo il markup, puoi vedere cosa fa, invece di provare a invertire i raccoglitori di eventi javascript di ricerca.

Pertanto, come terza alternativa a quanto sopra, utilizzare gli attributi dei dati per annunciare in modo dichiarativo il comportamento all'interno del markup. Il comportamento è tenuto fuori dalla vista, ma a prima vista puoi vedere cosa sta succedendo.

Esempio Bootstrap:

<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>

Fonte: http://getbootstrap.com/javascript/#popovers

Nota Il principale svantaggio del secondo esempio è l'inquinamento dello spazio dei nomi globale. Ciò può essere aggirato utilizzando la terza alternativa sopra, oppure framework come Angular e i loro attributi ng-click con ambito automaticamente.

Nessuno dei due è meglio in quanto possono essere utilizzati per scopi diversi. onClick(in realtà dovrebbe essere onclick) leggermente migliore, ma dubito fortemente che noterai una differenza lì.

Vale la pena notare che fanno cose diverse: .clickpossono essere associati a qualsiasi raccolta jQuery mentre onclickdeve essere utilizzato in linea sugli elementi a cui vuoi che sia associato. Puoi anche associare un solo evento all'utilizzo onclick, mentre .clickti consente di continuare a associare gli eventi.

A mio avviso, sarei coerente a riguardo e userei .clickovunque e manterrei tutto il mio codice JavaScript insieme e separato dal codice HTML.

Non usare onclick. Non c'è motivo di usarlo se non sai cosa stai facendo, e probabilmente non lo sai.

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

Gli eventi onclick, onmouseover, onmouseout, ecc. sono in realtà negativi per le prestazioni ( principalmente in Internet Explorer , vai in figura). Se si codifica utilizzando Visual Studio , quando si esegue una pagina con questi, ognuno di questi creerà un blocco SCRIPT separato che occupa memoria e quindi rallenta le prestazioni.

Per non parlare del fatto che dovresti avere una separazione delle preoccupazioni : JavaScript e layout dovrebbero essere separati!

È sempre meglio creare evenHandlers per uno di questi eventi, un evento può catturare centinaia / migliaia di elementi, invece di creare migliaia di blocchi di script separati per ognuno!

(Inoltre, tutto ciò che tutti gli altri dicono.)

Bene, una delle idee principali dietro jQuery è quella di separare JavaScript dal cattivo codice HTML . Il primo metodo è la strada da percorrere.

Il più delle volte, i metodi nativi JavaScript sono una scelta migliore rispetto a jQuery quando le prestazioni sono gli unici criteri, ma jQuery fa uso di JavaScript e semplifica lo sviluppo. È possibile utilizzare jQuery in quanto non peggiora eccessivamente le prestazioni. Nel tuo caso specifico, la differenza di prestazioni è ignorabile.

Il primo metodo di utilizzo onclicknon è jQuery ma semplicemente Javascript, quindi non si ottiene il sovraccarico di jQuery. Il modo jQuery può essere espanso tramite i selettori se è necessario aggiungerlo ad altri elementi senza aggiungere il gestore eventi a ciascun elemento, ma come è ora è solo una domanda se è necessario utilizzare jQuery o meno.

Personalmente dal momento che stai usando jQuery mi atterrei con esso in quanto è coerente e disaccoppia il markup dallo script.

Il primo metodo è preferire. Utilizza i modelli avanzati di registrazione degli eventi , il che significa che è possibile collegare più gestori allo stesso elemento. È possibile accedere facilmente all'oggetto evento e il gestore può vivere nell'ambito di qualsiasi funzione. Inoltre, è dinamico, ovvero può essere invocato in qualsiasi momento ed è particolarmente adatto per elementi generati dinamicamente. Non importa se usi jQuery, un'altra libreria o i metodi nativi direttamente.

Il secondo metodo, utilizzando attributi inline, richiede molte funzioni globali (che portano all'inquinamento dello spazio dei nomi) e mescola il contenuto / la struttura (HTML) con il comportamento (JavaScript). Non usarlo.

Non è possibile rispondere facilmente alla domanda su prestazioni o standard. I due metodi sono completamente diversi e fanno cose diverse. Il primo è più potente, mentre il secondo è disprezzato (considerato stile cattivo).

Funzione Onclick Jquery

$('#selector').click(function(){ //Your Functionality });