web-dev-qa-db-fra.com

Différence entre $ (this) et event.target?

Je suis nouveau dans jQuery et je faisais des panneaux à onglets, en suivant le tutoriel de JavaScript et jQuery: le manuel manquant, il y a cette première ligne lorsque l'auteur le fait:

   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 j'ai changé evt.target à $(this), cela a fonctionné à merveille.

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-eventsthisjquery
140
Rafael Adel

Là is une différence entre $(this) et event.target, et assez significative. Alors que this (ou event.currentTarget, voir ci-dessous) fait toujours référence à l'élément DOM auquel l'écouteur était attaché, event.target est l'élément DOM sur lequel l'utilisateur a cliqué. Rappelez-vous qu’en raison de la propagation des événements, si vous avez

<div class="outer">
  <div class="inner"></div>
</div>

et attachez un écouteur de clic à la div externe

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

alors la handler sera invoquée lorsque vous cliquerez à l'intérieur des div externes et internes (sauf si vous avez un autre code qui gère l'événement sur la div interne et arrête la propagation).

Dans cet exemple, lorsque vous cliquez à l'intérieur de la division interne, puis dans la section handler:

  • this se réfère à l'élément .outer DOM (parce que c'est l'objet auquel le gestionnaire a été attaché)
  • event.currentTarget fait également référence à l'élément .outer (car il s'agit de l'élément cible actuel qui gère l'événement)
  • event.target fait référence à l'élément .inner (cela vous donne l'élément d'où provient l'événement)

Le wrapper jQuery $(this) encapsule 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, cette opération est effectuée automatiquement), cela indiquera autre chose. Vous pouvez toujours obtenir l'élément DOM actuel de event.currentTarget.

267
Petr Bela

this est une référence pour l'élément DOM pour lequel l'événement est traité (la cible actuelle). event.target fait référence à l'élément qui a initié 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 le documents d'événement jQuery , mais en résumé:

event.currentTarget

L'élément DOM actuel dans la phase de propagation d'événements.

event.delegateTarget

L'élément auquel le gestionnaire d'événements jQuery actuellement appelé était attaché.

event.relatedTarget

L'autre élément DOM impliqué dans l'événement, le cas échéant.

event.target

L'élément DOM qui a initié l'événement.

Pour obtenir la fonctionnalité souhaitée à l'aide de jQuery, vous devez l'envelopper dans un objet jQuery à l'aide de: $(this) ou $(evt.target).

La méthode .attr() ne fonctionne que sur un objet jQuery, pas sur un élément DOM. $(evt.target).attr('href') ou simplement evt.target.href vous donnera ce que vous voulez.

36
nbrooks

Il y a une différence significative dans la manière dont jQuery gère la variable this avec une méthode "on"

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

Si vous comparez cela avec: -

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

http://api.jquery.com/on/ déclare:

Lorsque jQuery appelle un gestionnaire, le mot clé this est une référence à l'élément où l'événement est en cours de diffusion ; pour les événements directement liés this est l'élément auquel l'événement a été associé et pour les événements délégués this est un sélecteur d'élément correspondant. (Notez que this peut ne pas être égal à event.target si l'événement a été déclenché par un élément descendant.)

Pour créer un objet jQuery à partir de l'élément afin qu'il puisse être utilisé avec les méthodes jQuery, utilisez $ (this).

Si nous avons

<input type="button" class="btn" value ="btn1">
<input type="button" class="btn" value ="btn2">
<input type="button" class="btn" value ="btn3">

<div id="outer">
    <input type="button"  value ="OuterB" id ="OuterB">
    <div id="inner">
        <input type="button" class="btn" value ="InnerB" id ="InnerB">
    </div>
</div>

Vérifiez la sortie ci-dessous:

<script>
    $(function(){
        $(".btn").on("click",function(event){
            console.log($(this));
            console.log($(event.currentTarget));
            console.log($(event.target));
        });


        $("#outer").on("click",function(event){
            console.log($(this));
            console.log($(event.currentTarget));
            console.log($(event.target));
        })
    })
</script>

Notez que j’utilise $ pour envelopper l’élément dom afin de créer un objet jQuery, comme nous le faisons toujours.

Vous constaterez que pour le premier cas, this, event.currentTarget, event.target sont tous référencés au même élément.

Dans le second cas, lorsque le délégué d'événement à un élément enveloppé est déclenché, event.target est référencé à l'élément déclenché, tandis que this et event.currentTarget sont référencés à l'endroit où l'événement est livré. .

Pour this et event.currentTarget, ils sont exactement la même chose selon http://api.jquery.com/event.currenttarget/

4
Jaskey

Il y a des problèmes de navigation entre navigateurs ici.

Un gestionnaire d’événements non jQuery typique pourrait ressembler à ceci:

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 normalise evt et rend la cible disponible sous la forme this dans les gestionnaires d'événements. Ainsi, un gestionnaire d'événements jQuery typique ressemblerait à ceci:

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

Un gestionnaire d'événements hybride qui utilise la règle evt normalisée de jQuery et une cible POJS ressemblerait à ceci:

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

Dans une fonction de gestionnaire d'événement ou une méthode d'objet, un moyen d'accéder aux propriétés de "l'élément conteneur" 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 d'objet, cela représente l'instance d'objet.

  • Et dans un gestionnaire d'événement, cela représente l'élément qui a reçu l'événement.

Par exemple:

<!DOCTYPE html>
<html>
    <head>
        <script>
        function mouseDown() {
            alert(this);
        }
        </script>
    </head>
    <body>
        <p onmouseup="mouseDown();alert(this);">Hi</p>
    </body>
</html>

Le contenu des fenêtres d’alerte après le rendu de ce code HTML est respectivement:

object Window
object HTMLParagraphElement

Un objet Event est associé à tous les événements. Ses propriétés fournissent des informations "sur l'événement", telles que l'emplacement d'un clic de souris dans la page Web.

Par exemple:

<!DOCTYPE html>
<html>
    <head>
        <script>
        function mouseDown(event) {
            var theEvent = event ? event : window.event;
            var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
            alert(event);
                    alert(locString);
        }
        </script>
    </head>
    <body>
        <p onmouseup="mouseDown(event);">Hi</p>
    </body>
</html>

Le contenu des fenêtres d’alerte après le rendu de ce code HTML est respectivement:

object MouseEvent
X = 982 Y = 329
0
MMKarami