jQuery.click() vs onClick

Ho un'enorme applicazione jQuery, e sto usando i due metodi seguenti per gli eventi click.

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>

JavaScript chiamata di funzione

function divFunction(){
    //Some code
}

Nella mia applicazione uso il primo o il secondo metodo. Quale è meglio? Meglio per le prestazioni? E standard?

Soluzione

Usare $('#myDiv').click(function(){ è meglio perché segue il modello standard di registrazione degli eventi. (jQuery internamente usa addEventListener e attachEvent).

Fondamentalmente registrare un evento in modo moderno è il modo non intrusivo di gestire gli eventi. Inoltre per registrare più di un ascoltatore di eventi per l'obiettivo puoi chiamare addEventListener() per lo stesso obiettivo.

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 ascoltatore di eventi come specificato nel W3C DOM. I suoi vantaggi sono i seguenti:

  • Permette di aggiungere più di un singolo gestore per un evento. Questo è 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 a grana più fine della fase in cui l'ascoltatore viene attivato (cattura vs. bubbling)
  • Funziona su qualsiasi elemento DOM, non solo su elementi HTML.

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

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

O le proprietà degli elementi DOM, esempio:

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

sono vecchie e possono essere sovrascritte facilmente.

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

Il problema con il metodo DOM element properties è che solo un gestore di eventi può essere legato ad un elemento per evento.

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

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

Commentari (14)

Potreste combinarli, usare jQuery per legare la funzione al click

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

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

function divFunction(){
 //some code
}
Commentari (0)

Il primo metodo è da preferire. Utilizza il [modello avanzato di registrazione degli eventi] (http://www.quirksmode.org/js/events_advanced.html), il che significa che è possibile allegare più gestori allo stesso elemento. Si può accedere facilmente all'oggetto evento, e il gestore può vivere in qualsiasi funzione. Inoltre, è dinamico, cioè può essere invocato in qualsiasi momento ed è particolarmente adatto per elementi generati dinamicamente. Che si usi jQuery, un'altra libreria o direttamente i metodi nativi non ha molta importanza.

Il secondo metodo, usando gli attributi inline, ha bisogno di un sacco di funzioni globali (che porta all'inquinamento dello spazio dei nomi) e mescola il contenuto/struttura (HTML) con il comportamento (JavaScript). Non usatelo.

Alla tua domanda sulle prestazioni o sugli standard non si può rispondere facilmente. I due metodi sono semplicemente completamente diversi e fanno cose diverse. Il primo è più potente, mentre il secondo è disprezzato (considerato cattivo stile).

Commentari (0)