$ (this) OR event.target OR var input = $ (this)

Question

jQuery attualmente mi fornisce un'introduzione divertente a Javascript dopo 12 anni di sopravvivenza felicemente senza. Sono al punto in cui sto cercando di imparare il più possibile sull'ottimizzazione del codice che scrivo e, mentre ho trovato molti buoni materiali di riferimento, c'è qualcosa di abbastanza fondamentale che mi sta sconcertando e non ho potuto per trovare qualcosa su di esso ovunque.

Quando si allega un elemento a un elemento, come dovrei fare riferimento a quell'elemento all'interno della funzione. Ad esempio, quando si collega una funzione per l'evento click di un elemento:

$('#a_button',$('#a_list_of_buttons')).click(function() { 
    // NOW WHAT'S THE BEST WAY TO REFER TO '#a_button' ? 
}); 

So di non continuare a ri-selezionandolo in questo modo come il browser deve cercare l'intera DOM di nuovo da zero per trovare ciò che è già trovato una volta :

$('#a_button').click(function() { 
    // I KNOW THAT THIS IS NAUGHTY 
    var buttonValue = $('#a_button').val(); 
    $('#a_button').addClass('button_has_been_clicked'); 

}); 

Attualmente sto usando uno dei seguenti modi, ma non sono del tutto sicuro di quello che ciascuno è in realtà facendo:

$('#a_button').click(function() { 
    // USING this 
    var buttonValue = $(this).val(); 
    $(this).addClass('button_has_been_clicked'); 
}); 

ma è appena ri-selezionando come nei abeti t esempio "cattivo"?

$('#a_button').click(function(event) { 
    // USING event.target 
    var buttonValue = $(event.target).val(); 
    $(event.target).addClass('button_has_been_clicked'); 
}); 

Questo sembra che potrebbe essere migliore, ma è efficace per fare riferimento a '' event.target più volte?

$('#a_button').click(function(event) { 
    // USING A LOCAL VARIABLE 
    var thisButton = $(this); 

    // OR SHOULD THAT BE 
    var thisButton = $(event.target); 

    var buttonValue = thisButton.val(); 
    thisButton.addClass('button_has_been_clicked'); 
}); 

Capisco l'efficienza delle prestazioni di cose che passano alle variabili ma sono incerto anche in queste situazioni utilizzando $ (this) o $ (event.target) mi offre già e così dalle stesse efficienze impostando una nuova variabile in realtà sto facendo più lavoro di cui ho bisogno.

Grazie.

Answer 1

Potrei sbagliarmi, ma this e event.target sono entrambi riferimenti diversi allo stesso elemento.

this e event.target non sono sempre riferimenti allo stesso elemento. Ma in risposta alla tua domanda, var thisButton = $(this); è sicuramente il vincitore. Se si stesse scrivendo codice C#, si sarebbe mai effettuare le seguenti operazioni:

this.Controls[0].Controls[0].Text = "Foo"; 
this.Controls[0].Controls[0].Controls.Clear(); 

si dovrebbe fare questo:

var control = this.Controls[0].Controls[0]; 

quindi probabilmente dovrebbe mai riutilizzo $(this) più di una volta sia. Sebbene sia banale convertire this da un elemento DOM a un oggetto jQuery, è comunque un sovraccarico non necessario.

Tuttavia, a volte è necessario ridurre l'ottimizzazione per assicurarsi che il codice mantenga la sua leggibilità.

Un'altra opzione, naturalmente, è solo per cambiare ciò che è this. Questo è javascript dopo Al:

this = $(this); // Now `this` is your jQuery object 

Diniego: Ho appena provato il sopra e tutto sembrava funzionare. Potrebbe avere alcuni problemi però.

Answer 2

Nella mia esperienza vorrei andare con il seguente:

$('#a_button').click(function() { 
    // USING this 
    var buttonValue = $(this).val(); 
    $(this).addClass('button_has_been_clicked'); 
}); 

Il this nel contesto del metodo di callback click è un riferimento per l'evento DOM. Poiché hai già un riferimento all'oggetto DOM, è trival per convertirlo in un oggetto jQuery poiché non è richiesta una ricerca.

Ma su una nota a margine, se non è necessario utilizzare jQuery nella richiamata, non farlo. Puoi semplicemente ottenere il valore del pulsante usando lo standard JS this.currentTarget.value.

Gli altri esempi citati richiedono una ricerca DOM e, a seconda della complessità del selettore, può richiedere più tempo. L'utilizzo di una ricerca basata su ID come '#a_button' avrà prestazioni migliori rispetto a una classe basata come .myClass.

Answer 3

this e event.target non sono sempre gli stessi. this si riferisce all'elemento a cui è stato assegnato l'ascoltatore (in questo caso il '#a_button'). event.target tuttavia è l'elemento che ha effettivamente attivato l'evento, che può essere un childnode di #a_button.

Quindi $(this) è la cosa che stai cercando.

Vai alla tabella: http://api.jquery.com/event.target/

Answer 4

ho costruito un piccolo esempio per dimostrare come this e e.target effettivamente lavoro: http://jsfiddle.net/xZAVa/