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

Question

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.

Answer 1

Puedo estar equivocado, pero this y event.target son solo referencias diferentes al mismo elemento.

this y event.target no son siempre referencias al mismo elemento. Pero en respuesta a su pregunta, var thisButton = $(this); es definitivamente el ganador. Si estuviera escribiendo código C#, nunca haría lo siguiente:

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

podría hacer esto:

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

Así que probablemente nunca se debe volver a utilizar más de una vez $(this) tampoco. Aunque es trivial convertir this de un elemento DOM a un objeto jQuery, sigue siendo una sobrecarga innecesaria.

Sin embargo, a veces es necesario retroceder desde la optimización para asegurarse de que su código mantenga su legibilidad.

Otra opción, por supuesto, es simplemente cambiar lo que this es. Este es el javascript afteral:

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

exención de responsabilidad: acabo intentado todo lo anterior y parece que ha funcionado. Puede tener algunos problemas sin embargo.

Answer 2

En mi experiencia me iría con lo siguiente:

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

El this en el contexto de su método de devolución de llamada de clic es una referencia al evento DOM. Como ya tiene una referencia al objeto DOM, es trival convertirlo en un objeto jQuery ya que no se requiere una búsqueda.

Pero en una nota lateral, si no necesita usar jQuery en su devolución de llamada, entonces no lo haga. Simplemente puede obtener el valor del botón utilizando el estándar JS this.currentTarget.value.

Los otros ejemplos que mencionó requieren una búsqueda DOM, y dependiendo de la complejidad de su selector puede tomar más tiempo. El uso de una búsqueda basada en ID como '#a_button' tendrá un mejor rendimiento que una clase basada parecía .myClass.

Answer 3

this y event.target no son siempre lo mismo. this se refiere al elemento que asignó al oyente (en este caso, el '#a_button'). event.target, sin embargo, es el elemento que realmente activó el evento, que puede ser un niño de #a_button.

Así que $(this) es lo que está buscando.

Véase la referencia: http://api.jquery.com/event.target/

Answer 4

I construyó un pequeño ejemplo para demostrar cómo this y e.target realmente funcionan: http://jsfiddle.net/xZAVa/