Cet article illustrera le 'event.target' et son utilisation en JavaScript.
Qu'est-ce que 'event.target' en JavaScript ?
Le ' événement.cible ' est une propriété/attribut de ' événement ” en Javascript. Il fait référence à l'élément qui a déclenché l'événement. Pour accéder à l'attribut event.target, l'événement de l'élément doit être écouté. Le ' addEventListener() ” méthode est utilisée pour écouter l'événement spécifique.
Syntaxe
Pour utiliser la propriété 'event.target', suivez la syntaxe indiquée :
élément. addEventListener ( '<événement>' , fonction ( événement ) {
console. enregistrer ( événement. cible )
} )
Dans la syntaxe donnée,
- Le ' addEventListener() ” est utilisée pour ajouter un gestionnaire d'événements pour l'élément spécifique.
- ' <événement> ” indique tout événement, tel que “ Cliquez sur ”, “ survol de la souris ', et ainsi de suite.
Exemple
Dans l'exemple donné, nous obtiendrons l'élément qui a déclenché l'événement en utilisant le ' événement.cible ' propriété.
Ici, nous allons créer un bouton en lui attribuant un identifiant ' btn ” qui est utilisé en JavaScript pour accéder au bouton :
< identifiant du bouton = 'btn' > Cliquez ici bouton >
Dans le fichier JavaScript, d'abord, nous allons obtenir la référence du bouton en utilisant son identifiant attribué à l'aide du ' getElementById() ' méthode:
constante bouton = document. getElementById ( 'btn' ) ;Attachez un écouteur d'événement avec le bouton . Le ' Cliquez sur ” est lancé au clic du bouton et l'objet événement est passé à l'écouteur d'événement en tant qu'argument. Le ' événement.cible ” est accessible depuis la fonction d'écoute pour obtenir une référence à l'élément bouton qui a déclenché l'événement :
bouton. addEventListener ( 'Cliquez sur' , fonction ( événement ) {console. enregistrer ( 'Événement cible :' , événement. cible ) ;
} ) ;
La sortie affiche la référence du bouton spécifique qui est cliqué :
Vous pouvez obtenir plus d'informations et appliquer différentes fonctionnalités comme le style sur l'événement ciblé en utilisant ses attributs.
Quels sont les attributs de 'event.target' ?
Il existe différents attributs de la propriété 'event.target' qui fournissent des informations sur l'élément cible. Quelques-uns des attributs communs de l'objet event.target sont les suivants :
| Attributs event.target | Description |
| event.target.tagname | Utilisé pour obtenir le ' nom ” de la balise HTML de l'élément cible. |
| event.target.value | Utiliser pour récupérer le ' valeur ” de l'élément cible. Cet attribut est principalement utilisé pour les éléments d'entrée. |
| event.target.id | Pour obtenir le ' identifiant ” de l'élément cible, utilisez l'attribut donné. |
| event.target.classList | La liste de ' Des classes » contenant l'élément cible est accessible par cet attribut. |
| event.target.textContent | Utilisé pour obtenir le ' contenu du texte ” de l'élément cible. |
| événement.cible.href | Cet attribut récupère le ' href ” de l'élément cible, comme les liens. |
| event.target.style | Pour modifier le ' CSS ” propriété de l'élément cible, utilisez cet attribut. |
Exemple 1 : modifier la couleur d'arrière-plan de l'élément cible
Dans l'exemple fourni, nous allons changer la couleur de fond de l'élément cible en utilisant le ' style ' attribut sur le ' Cliquez sur ' événement:
constante bouton = document. getElementById ( 'btn' ) ;bouton. addEventListener ( 'Cliquez sur' , fonction ( événement ) {
événement. cible . style . Couleur de l'arrière plan = 'bleu' ;
} ) ;
Sortir
Exemple 2 : obtenir la valeur de l'élément cible
Créez un champ de saisie de texte et une zone pour afficher le texte à l'aide de la balise
. Attribuez des identifiants au champ de saisie et à la balise
en tant que ' prendreEntrée ' et ' montrer ', respectivement:
< type d'entrée = 'texte' identifiant = 'prendreEntrée' >< identifiant p = 'montrer' > p >
Obtenez la référence du champ de texte à l'aide du ' getElementById() ' méthode:
a été saisi = document. getElementById ( 'prendreEntrée' ) ;Utilisez le ' valeur ' attribut avec le ' événement.cible ” pour obtenir la valeur de l'élément ciblé :
saisir. addEventListener ( 'saisir' , ( événement ) => {document. getElementById ( 'montrer' ) . innerHTML = événement. cible . valeur ;
} )
Comme vous pouvez voir que la valeur saisie dans la zone de texte a été récupérée avec succès à l'aide de la touche ' valeur ' attribut:
C'était tout à propos de 'event.target' en JavaScript.
Conclusion
Le ' événement.cible » fait référence à l'élément qui a déclenché/initialisé l'événement. Certains attributs de la propriété 'event.target' fournissent des informations sur l'élément cible. Par exemple, ' event.target.tagname ”, “ .valeur ”, “ .identifiant ”, “ .style ', et ainsi de suite. Cet article illustre le 'event.target', ses attributs et son utilisation en JavaScript.