11521 sujets

JavaScript, DOM et API Web HTML5

CurrentTarget .... on en fait quoi en fait?

Bonsoir à tous,

en m'intéressant aux propriétés target et currentTarget de l'objet Event en Javascript, je me demande quelles sont les utilisations possibles de currentTarget....

J'ai compris la différence entre les deux propriétés, donc ce n'est pas la peine de me rappeler que: currentTarget Identifie la cible actuelle de l'évènement, lorsque l'évènement traverse le DOM. Il se réfère toujours à l'élément auquel le gestionnaire d'évènements a été attaché contrairement à event.target qui identifie l'élément sur lequel l'évènement a eu lieu.

Mais à quoi cela sert-il d'avoir cette propriété à notre disposition?

Par exemple avec le code suivant:

  
<div id="wrap-btn">
    <button id="btn1">Jour</button>
    <button id="btn2">Nuit</button>
  </div>


document.getElementById('wrap-btn').addEventListener('click', event => {
  console.log('00',event);
  console.log('01',event.target);
  console.log('02',event.currentTarget);
  });


Si je clique sur le bouton Jour (#btn1)
- event.target sera #btn1
- event.curretTarget sera #wrap-btn
Dans ce cas, on peut utiliser un seul écouteur d’événement dans un conteneur qui pourrait par exemple contenir 15 boutons et se servir de event.target pour déterminer quel bouton a été cliqué, mais ma question est la suivante....

Quel est l'utilité d'avoir event.currentTarget à notre disposition?

Merci
Modifié par lionel_css3 (06 Dec 2019 - 21:23)
Suppose que tu aies plusieurs <div> du même genre qui utilisent toutes la même fonction sur onclick, il est intéressant de savoir quelle est la <div> à l'intérieur de laquelle un clic a déclenché l'appel de la fonction.
Bonjour Lionel,

en modifiant un peu ton code (ajout de texte avant et apres les elements 'button'), j'obtiens une difference visible entre 'target' et 'currentTarget'.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Target et currentTarget</title>
</head>
<body>
    
    <div id="wrap-btn">
        text ici ...
        <button id="btn1">Jour</button>
        <button id="btn2">Nuit</button>
        ... et là.
    </div>

<script>
    document.getElementById('wrap-btn').addEventListener('click', event => {
        // event.target.style.color="red";
        event.currentTarget.style.color="red";
    });
</script>
    
</body>
</html>


- avec 'currentTarget' : seul le texte hors des boutons se mettra en rouge (meme si on clique sur jour ou sur nuit)
- avec 'target' : l'élement cliqué se mettra en rouge (le texte si on clique sur le texte, le mot jour si on clique sur le bouton rouge et idem pour le bouton nuit).
en mettant le texte dans dans 'p' et en utilisant 'currentTarget' : idem.

Quand on clique sur un 'p', les deux 'p' se mettent en rouge mais pas les 'button'.


   <div id="wrap-btn">
        <p>text ici ...</p>
        <button id="btn1">Jour</button>
        <button id="btn2">Nuit</button>
        <p>... et là.</p> 
    </div>

Modifié par alain_47 (07 Dec 2019 - 20:31)
Je suis quand meme grandement surpris du comportement des 'button' que je n'arrive pas à m'expliquer.

Sans les 'button', tout est logique :
- currentTarget pour avoir le parent et tous ses enfants,
- target pour avoir que l'enfant cliqué.

Mais 'currentTarget' ne fonctionne pas avec les button !
Tous les enfants sont bien visés... SAUF les 2 buttons qui pourtant sont également enfants de la 'div' .

Si quelqu'un peut me dire pourquoi, merci d'avance.


   <div id="wrap-btn">
        <p>text ici ...</p>
        <button>Jour</button>
        <button>Nuit</button>
        <p>... et là.</p>
        <p>
            <ul>
                <li>- 1</li>
                <li>- 2</li>
            </ul>
        </p> 
   </div>
Modérateur
Et l'eau,

Selon moi (je peux me tromper),
currentTarget = est l'equivalent de "this" (l'élément cible => document.querySelector('wrap-btn'))
target = est plus précis puisqu'il capture l'element ou le sous élément cliqué. Je dis cliqué puisqu'on parle d'un event click
Modifié par niuxe (10 Dec 2019 - 18:47)
Sujet clos
Aller à