Je suis nouveau dans jQuery et je faisais des panneaux à onglets, en suivant le tutoriel en JavaScript et jQuery: The Missing Manual , il y a cette première ligne lorsque l'auteur fait ceci:
var target = $(this);
Mais j'ai essayé de le faire de cette façon
var target = evt.target;
et j'ai eu cette erreur:
Uncaught TypeError: Object http://localhost/tabbedPanels/#panel1 has no method 'attr'
Et quand je suis evt.target
revenu $(this)
, ça a marché comme un charme.
Je veux savoir quelle est la différence entre $(this)
et evt.target
?
Voici mon code au cas où vous en auriez besoin:
index.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();
})
javascript-events
this
jquery
Rafael Adel
la source
la source
this
est une référence à l'élément JavaScript DOM.$()
est le format fourni par jQuery pour transformer l'élément DOM en un objet jQuery. en utilisantevt.target
vous faites référence à un élément, alors qu'avec$(this)
vous faites référence à un objet avec des paramètres auxquels nous avons accès.$(evt.target)
et (dans ce cas) vous retrouver avec les mêmes résultats. La.attr()
méthode est fournie par l'objet jQuery, pas par l'élément luiRéponses:
Il y a une différence entre
$(this)
etevent.target
, et une différence assez significative. Alors quethis
(ouevent.currentTarget
, voir ci-dessous) fait toujours référence à l'élémentevent.target
DOM auquel l'auditeur était attaché, est l'élément DOM réel sur lequel l'utilisateur a cliqué. N'oubliez pas qu'en raison du bouillonnement d'événements, si vous avezet attachez l'écouteur de clic au div externe
alors le
handler
sera appelé lorsque vous cliquerez à l'intérieur du div externe ainsi que du div interne (sauf si vous avez un autre code qui gère l'événement sur le div interne et arrête la propagation).Dans cet exemple, lorsque vous cliquez à l'intérieur du div interne, puis dans le
handler
:this
fait référence à l'.outer
élément DOM (car c'est l'objet auquel le gestionnaire était attaché)event.currentTarget
fait également référence à l'.outer
élément (car c'est l' élément cible actuel qui gère l'événement)event.target
fait référence à l'.inner
élément (cela vous donne l'élément d'où l'événement est né)L'encapsuleur jQuery enveloppe
$(this)
uniquement l'élément DOM dans un objet jQuery afin que vous puissiez y appeler des fonctions jQuery. Vous pouvez faire la même chose avec$(event.target)
.Notez également que si vous reliez le contexte de
this
(par exemple, si vous utilisez Backbone, c'est fait automatiquement), il pointera vers autre chose. Vous pouvez toujours obtenir l'élément DOM réel à partir deevent.currentTarget
.la source
currentTarget
est toujours celui avec le gestionnaire, ie. the external onethis
est une référence pour l'élément DOM pour lequel l'événement est géré (la cible actuelle).event.target
fait référence à l'élément qui a déclenché l'événement. Ils étaient les mêmes dans ce cas, et peuvent souvent l'être, mais ils ne le sont pas nécessairement toujours.Vous pouvez en avoir une bonne idée en consultant la documentation sur les événements jQuery , mais en résumé:
Pour obtenir la fonctionnalité souhaitée à l'aide de jQuery, vous devez l'envelopper dans un objet jQuery en utilisant soit:
$(this)
ou$(evt.target)
.La
.attr()
méthode ne fonctionne que sur un objet jQuery, pas sur un élément DOM.$(evt.target).attr('href')
ou tout simplementevt.target.href
vous donnera ce que vous voulez.la source
Il y a une différence significative dans la façon dont jQuery gère la variable this avec une méthode "on"
Si vous comparez cela avec: -
la source
http://api.jquery.com/on/ déclare:
Si nous avons
Vérifiez la sortie ci-dessous:
Notez que j'utilise
$
pour envelopper l'élément dom afin de créer un objet jQuery, ce que nous faisons toujours.Vous constaterez que pour le premier cas,
this
,event.currentTarget
,event.target
sont toutes référencées au même élément.Alors que dans le second cas, lorsque le délégué d'événement à un élément encapsulé est déclenché, il
event.target
serait référencé à l'élément déclenché, tandis quethis
etevent.currentTarget
référencé à l'endroit où l'événement est livré.Pour
this
etevent.currentTarget
, c'est exactement la même chose selon http://api.jquery.com/event.currenttarget/la source
Il y a des problèmes entre navigateurs ici.
Un gestionnaire d'événements non-jQuery typique serait quelque chose comme ceci:
jQuery normalise
evt
et rend la cible disponible commethis
dans les gestionnaires d'événements, donc un gestionnaire d'événements jQuery typique serait quelque chose comme ceci:Un gestionnaire d'événements hybride qui utilise jQuery normalisé
evt
et une cible POJS serait quelque chose comme ceci:la source
Dans une fonction de gestionnaire d'événements ou une méthode d'objet, une façon d'accéder aux propriétés de "l'élément contenant" consiste à utiliser le mot clé spécial this. Le mot clé this représente le propriétaire de la fonction ou de la méthode en cours de traitement. Alors:
Pour une fonction globale, cela représente la fenêtre.
Pour une méthode objet, cela représente l'instance d'objet.
Et dans un gestionnaire d'événements, cela représente l'élément qui a reçu l'événement.
Par exemple:
Le contenu des fenêtres d'alerte après le rendu de ce html est respectivement:
Un objet Event est associé à tous les événements. Il possède des propriétés qui fournissent des informations «sur l'événement», telles que l'emplacement d'un clic de souris dans la page Web.
Par exemple:
Le contenu des fenêtres d'alerte après le rendu de ce html est respectivement:
la source