¿Diferencia entre $(this) y event.target?
Estaba haciendo paneles con pestañas, siguiendo el tutorial en JavaScript y jQuery: The Missing Manual , ahí está esa primera línea cuando el autor hace esto:
var target = $(this);
Pero intenté hacerlo de esa manera.
var target = evt.target;
y me salió ese error:
TypeError no detectado: el objeto http://localhost/tabbedPanels/#panel1 no tiene el método 'attr'
Y cuando volví a cambiar evt.targeta $(this), funcionó de maravilla.
Quiero saber cual es la diferencia entre $(this)y evt.target?
Aquí está mi código en caso de que lo necesites:
índice.html:
<!DOCTYPE html>
<html>
<head>
<title>Tabbed Panel</title>
<style>
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;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="tabsContainer">
<ul id="tabs">
<li><a href="#panel1">Panel1</a></li>
<li><a href="#panel2">Panel2</a></li>
<li><a href="#panel3">Panel3</a></li>
<li><a href="#panel4">Panel4</a></li>
</ul>
</div>
<div id="panelsContainer">
<div id="panel1" class="panel">
this is panel1
</div>
<div id="panel2" class="panel">
this is panel2
</div>
<div id="panel3" class="panel">
this is panel3
</div>
<div id="panel4" class="panel">
this is panel4
</div>
</div>
</div>
</body>
</html>
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 y$(this) y event.targetbastante significativa. Mientras que this(o event.currentTarget, ver más abajo) siempre se refiere al elemento DOM al que se adjuntó el oyente, event.targetes el elemento DOM real en el que se hizo clic. Recuerde que debido a la propagación de eventos, si tiene
<div class="outer">
<div class="inner"></div>
</div>
y adjunte el oyente de clic al div externo
$('.outer').click( handler );
luego se handlerinvocará cuando haga clic dentro del div externo así como en 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, luego en handler:
thisse refiere al.outerelemento DOM (porque ese es el objeto al que se adjuntó el controlador)event.currentTargettambién se refiere al.outerelemento (porque ese es el elemento de destino actual que maneja el evento)event.targetse refiere al.innerelemento (esto le da el elemento donde se originó el evento)
El contenedor jQuery $(this)solo envuelve el elemento DOM en un objeto jQuery para que pueda llamar a funciones jQuery en él. Puedes hacer lo mismo con $(event.target).
También tenga en cuenta que si vuelve a vincular el contexto de this(por ejemplo, si usa Backbone, se hace automáticamente), apuntará a otra cosa. Siempre puedes obtener el elemento DOM real de event.currentTarget.
thises una referencia para el elemento DOM para el cual se maneja el evento (el objetivo actual). event.targetSe refiere al elemento que inició el evento. En este caso fueron los mismos, y pueden serlo a menudo, pero no necesariamente son siempre así.
Puede tener una buena idea de esto revisando los documentos del evento jQuery , pero en resumen:
evento.objetivo actual
El elemento DOM actual dentro de la fase de difusión del evento.
evento.delegateTarget
El elemento donde se adjuntó el controlador de eventos jQuery actualmente llamado.
evento.objetivo relacionado
El otro elemento DOM involucrado en el evento, si lo hay.
evento.objetivo
El elemento DOM que inició el evento.
Para obtener la funcionalidad deseada usando jQuery, debe envolverla en un objeto jQuery usando: $(this)o $(evt.target).
El .attr()método sólo funciona en un objeto jQuery, no en un elemento DOM. $(evt.target).attr('href')o simplemente evt.target.hrefte dará lo que deseas.
