Qu'est-ce que l'événement.cible en javascript?

Un "événement”Se produit lorsque l'état d'un objet change. Les activités des utilisateurs, comme appuyer sur n'importe quelle touche ou cliquer sur la souris, peuvent provoquer des événements. Il existe certaines propriétés d'un événement en JavaScript qui aide aux fonctions de manutention des événements. Le "événement.cible"Est l'un d'eux qui identifie quel élément spécifique a déclenché l'événement.

Ce message illustrera «l'événement.cible »et son utilisation en javascript.

Qu'est-ce que «l'événement.cible »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'événement.attribut cible, l'événement de l'élément doit être écouté. Le "addEventListener ()«La méthode est utilisée pour écouter l'événement spécifique.

Syntaxe

Pour utiliser «l'événement.Propriété cible », suivez la syntaxe donnée:

élément.addEventListener ("", fonction (événement)
console.journal (événement.cible)
)

Dans la syntaxe donnée,

• Le "addEventListener ()»La méthode est utilisée pour ajouter un gestionnaire d'événements pour l'élément spécifique.
• ""Indique tout événement, comme"Cliquez sur","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 attribuant un ID "btn«Qui est utilisé dans JavaScript pour accéder au bouton:

Cliquez ici

Dans le fichier JavaScript, nous obtiendrons d'abord la référence du bouton en utilisant son ID attribué à l'aide du "getElementByid ()" méthode:

const Button = document.getElementById ('btn');

Joindre un écouteur d'événements avec le bouton. Le "Cliquez sur»L'événement est lancé sur le clic du bouton, et l'objet de l'événement est transmis à l'auditeur de l'événement comme argument. Le "événement.cible»L'attribut est accessible à partir de la fonction d'écoute pour obtenir une référence à l'élément de bouton qui a déclenché l'événement:

bouton.addEventListener ('click', fonction (événement)
console.Log ('Target Event:', événement.cible);
);

La sortie montre 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 «l'événement.cible"?

Il existe divers attributs de «l'événement.propriété cible »qui fournit des informations sur l'élément cible. Peu des attributs communs de l'événement.L'objet cible est le suivant:

événement.Attributs cibles	Description
événement.cible.tagname	Utilisé pour obtenir le «nom”De la balise HTML de l'élément cible.
événement.cible.valeur	Utiliser pour récupérer le «valeur”De l'élément cible. Cet attribut est principalement utilisé pour les éléments d'entrée.
événement.cible.identifiant	Pour avoir le «identifiant”Attribut de l'élément cible, utilisez l'attribut donné.
événement.cible.liste de classe	La liste de "Des classes”Contenant l'élément cible est accessible par cet attribut.
événement.cible.continent textuel	Utilisé pour obtenir le «contenu texte”De l'élément cible.
événement.cible.href	Cet attribut récupère le «href«Attribut de l'élément cible, tels que les liens.
événement.cible.style	Pour modifier le «CSS”Propriété de l'élément cible, utilisez cet attribut.

Exemple 1: Modifiez la couleur d'arrière-plan de l'élément cible

Dans l'exemple fourni, nous modifierons la couleur d'arrière-plan de l'élément cible en utilisant le «style«Attribut sur le«Cliquez sur" événement:

const Button = document.getElementById ('btn');
bouton.addEventListener ('click', fonction (événement)
événement.cible.style.backgroundColor = "Blue";
);

Sortir

Exemple 2: Obtenez la valeur de l'élément cible

Créer un champ de texte d'entrée et une zone pour afficher le texte en utilisant

étiqueter. Attribuer des ID au champ de saisie et

Tag comme "prendre en jeu" et "montrer", respectivement:

Obtenez la référence du champ de texte en utilisant le «getElementByid ()" méthode:

Var entrée = document.GetElementById ("TakeInput");

Utilisez le "valeur«Attribut avec le«événement.cible«Pour obtenir la valeur de l'élément ciblé:

saisir.addEventListener ("entrée", (événement) =>
document.getElementByid ("show").innerhtml = événement.cible.valeur;
)

Comme vous pouvez le voir que la valeur entrée dans la zone de texte a été récupérée avec succès à l'aide du «valeur" attribut:

C'était tout au sujet de «l'événement.cible »en javascript.

Conclusion

Le "événement.cible»Fait référence à l'élément qui a déclenché / lancé l'événement. Il y a quelques attributs de «l'événement.propriété cible »qui fournit des informations sur l'élément cible. Par exemple, "événement.cible.tagname",".valeur",".identifiant",".style", et ainsi de suite. Ce message a illustré «l'événement.cible », ses attributs et son utilisation en javascript.