Diferencia entre $ (this) y event.target?

Soy nuevo en jQuery, y estaba haciendo paneles con tabs, siguiendo el tutorial en JavaScript y jQuery: The Missing Manual , hay esa primera línea cuando el autor hace esto:

var target = $(this); 

Pero traté de hacerlo de esa manera

  var target = evt.target; 

y obtuve ese error:

 Uncaught TypeError: Object http://localhost/tabbedPanels/#panel1 has no method 'attr' 

Y cuando cambié evt.target a $(this) , funcionó a las $(this) evt.target .

Quiero saber cuál es la diferencia entre $(this) y evt.target ?

Aquí está mi código en caso de que lo necesites:

index.html:

    Tabbed Panel  body { width : 100%; height: 100%; } #wrapper { margin : auto; width : 800px; } #tabsContainer { overflow: hidden; } #tabs { padding:0; margin:0; } #tabs li { float : left; list-style:none; } #tabs a { text-decoration:none; padding : 3px 5px; display : block; } #tabs a.active { background-color : grey; } #panelsContainer { clear: left; } #panel1 { color : blue; } #panel2 { color : yellow; } #panel3 { color: green; } #panel4 { color : black; }      
this is panel1
this is panel2
this is panel3
this is panel4

script.js:

 $(function(){ $("#tabs a").click(function(evt){ var target = evt.target, targetPanel = target.attr("href"); $(".panel").hide(); $("#tabs a.active").removeClass("active"); target.addClass("active").blur(); $(targetPanel).fadeIn(300); evt.preventDefault(); }); $("#tabs a:first").click(); }) 

Hay una diferencia entre $(this) y event.target , y bastante significativa. Si bien this (o event.currentTarget , ver a continuación) siempre se refiere al elemento DOM al que se adjuntó el oyente, event.target es el elemento DOM real al que se hizo clic. Recuerde que debido al evento de burbujeo, si tiene

 

y adjuntar oyente de clic al div externo

 $('.outer').click( handler ); 

luego se invocará el handler cuando haga clic dentro del div externo así como el interno (a menos que tenga otro código que maneje el evento en el div interno y detenga la propagación).

En este ejemplo, cuando haces clic dentro del div interno, en el handler :

  • this refiere al elemento .outer DOM (porque ese es el objeto al que se adjuntó el controlador)
  • event.currentTarget también se refiere al elemento .outer (porque ese es el elemento objective actual que maneja el evento)
  • event.target refiere al elemento .inner (esto le da el elemento donde se originó el evento)

JQuery wrapper $(this) solo ajusta el elemento DOM en un objeto jQuery para que pueda invocar funciones jQuery en él. Puedes hacer lo mismo con $(event.target) .

También tenga en cuenta que si vuelve a enlazar el contexto de this (por ejemplo, si usa Backbone se hace automáticamente), apuntará a otra cosa. Siempre puede obtener el elemento DOM real de event.currentTarget .

this es una referencia para el elemento DOM para el cual se maneja el evento (el objective actual). event.target refiere al elemento que inició el evento. Eran los mismos en este caso, y a menudo pueden serlo, pero no siempre son así.

Puede obtener una buena idea de esto al revisar los documentos del evento jQuery , pero en resumen:

event.currentTarget

El elemento DOM actual dentro de la fase de burbujeo del evento.

event.delegateTarget

El elemento donde se adjuntó el controlador de eventos jQuery actualmente llamado.

event.relatedTarget

El otro elemento DOM involucrado en el evento, si corresponde.

event.target

El elemento DOM que inició el evento.

Para obtener la funcionalidad deseada con jQuery, debe envolverla en un objeto jQuery usando: $(this) o $(evt.target) .

El método .attr() solo funciona en un objeto jQuery, no en un elemento DOM. $(evt.target).attr('href') o simplemente evt.target.href le dará lo que quiera.

Hay una diferencia significativa en cómo jQuery maneja esta variable con un método “encendido”

 $("outer DOM element").on('click',"inner DOM element",function(){ $(this) // refers to the "inner DOM element" }) 

Si compara esto con:

 $("outer DOM element").click(function(){ $(this) // refers to the "outer DOM element" }) 

http://api.jquery.com/on/ estados:

Cuando jQuery llama a un controlador, la palabra clave this es una referencia al elemento donde se entrega el evento ; para eventos directamente enlazados, this es el elemento donde se adjuntó el evento y para eventos delegates, this es un selector de coincidencia de elementos. (Tenga en cuenta que this puede no ser igual a event.target si el evento ha surgido de un elemento descendiente).

Para crear un objeto jQuery a partir del elemento para que se pueda usar con los métodos de jQuery, use $ (this).

Si tenemos

    

Verifique el resultado siguiente:

  

Tenga en cuenta que utilizo $ para ajustar el elemento dom para crear un objeto jQuery, que es como siempre lo hacemos.

Encontrarías que, para el primer caso, this , event.currentTarget , event.target está referenciado al mismo elemento.

Mientras que en el segundo caso, cuando se desencadena el evento delegado a algún elemento envuelto, event.target se referencia al elemento desencadenado, mientras que this y event.currentTarget se referencian a donde se entrega el evento.

Para this y event.currentTarget , son exactamente lo mismo de acuerdo con http://api.jquery.com/event.currenttarget/

Hay problemas de navegador cruzado aquí.

Un controlador de eventos no jQuery típico sería algo como esto:

 function doSomething(evt) { evt = evt || window.event; var target = evt.target || evt.srcElement; if (target.nodeType == 3) // defeat Safari bug target = target.parentNode; //do stuff here } 

jQuery normaliza evt y hace que el destino esté disponible como this en los controladores de eventos, por lo que un controlador de eventos jQuery típico sería algo como esto:

 function doSomething(evt) { var $target = $(this); //do stuff here } 

Un manejador de eventos híbrido que usa el evt normalizado de jQuery y un objective POJS sería algo como esto:

 function doSomething(evt) { var target = evt.target || evt.srcElement; if (target.nodeType == 3) // defeat Safari bug target = target.parentNode; //do stuff here } 

Dentro de una función de controlador de eventos o método de objetos, una forma de acceder a las propiedades de “el elemento que lo contiene” es usar la palabra clave especial. La palabra clave this representa al propietario de la función o método que se está procesando actualmente. Asi que:

  • Para una función global, esto representa la ventana.

  • Para un método de objeto, esto representa la instancia del objeto.

  • Y en un controlador de eventos, esto representa el elemento que recibió el evento.

Por ejemplo:

       

Hi

El contenido de las ventanas de alerta después de renderizar este html respectivamente son:

 object Window object HTMLParagraphElement 

Un objeto de evento está asociado a todos los eventos. Tiene propiedades que proporcionan información “sobre el evento”, como la ubicación de un clic del mouse en la página web.

Por ejemplo:

       

Hi

El contenido de las ventanas de alerta después de renderizar este html respectivamente son:

 object MouseEvent X = 982 Y = 329