jQuery actualmente me proporciona una introducción divertida a Javascript después de 12 años de sobrevivir felizmente sin. Estoy en la etapa en la que trato de aprender todo lo que puedo sobre la optimización del código que escribo y, aunque he encontrado material de referencia bastante bueno, hay algo bastante básico que me deja perplejo y no he podido para encontrar algo al respecto en cualquier lugar.
Cuando estoy adjuntando algo a un elemento, ¿cómo me refiero a ese elemento dentro de la función? Por ejemplo, cuando se fija en función de eventos de clic de un elemento:
$('#a_button',$('#a_list_of_buttons')).click(function() {
// NOW WHAT'S THE BEST WAY TO REFER TO '#a_button' ?
});
no sé para mantener re-selección como si fuera el fin del navegador tiene que buscar en todo el DOM de nuevo desde cero para encontrar lo que ya ha encontrado una vez :
$('#a_button').click(function() {
// I KNOW THAT THIS IS NAUGHTY
var buttonValue = $('#a_button').val();
$('#a_button').addClass('button_has_been_clicked');
});
Actualmente estoy usando uno de los siguientes, pero no estoy del todo seguro de lo que cada uno está haciendo realidad:
$('#a_button').click(function() {
// USING this
var buttonValue = $(this).val();
$(this).addClass('button_has_been_clicked');
});
pero se trata simplemente volviendo a seleccionar como en los abetos t "travieso" ejemplo?
$('#a_button').click(function(event) {
// USING event.target
var buttonValue = $(event.target).val();
$(event.target).addClass('button_has_been_clicked');
});
Parece que podría ser mejor, pero ¿es eficiente referirse a 'event.target' varias veces?
$('#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');
});
entiendo las eficiencias de rendimiento de las cosas que pasan a variables, pero estoy seguro de si o no en estas situaciones utilizando $ (este) o $ (event.target) me proporciona ya y así también por las mismas eficiencias estableciendo una nueva variable. De hecho, estoy haciendo más trabajo que necesito.
Gracias.
La propiedad 'target' de objetos de evento se normaliza en jQuery y funcionará de la misma en todos los navegadores que es compatible. No siempre es lo mismo que 'this'. –
@GenericTypeTea: su método ganador es lo que he visto en casi todo el material de referencia que he leído, pero en ningún lugar me explicó por qué usaron este método, aparte de usar el equivalente de $ ('# a_button ') debe evitarse, ya que requiere una nueva búsqueda DOM siempre que se utiliza. –
@Tim - actualizó la respuesta. Gracias. – GenericTypeTea