Vérifiez si l'événement.Target a une classe spécifique en utilisant JavaScript

Parfois, le programmeur peut vouloir vérifier si l'élément qui a déclenché l'événement (l'événement.cible) correspond au sélecteur dont ils se soucient. Comment faire ça? JavaScript propose des méthodes prédéfinies telles que «contient()" et "allumettes()»Méthodes pour identifier le sélecteur spécifique dans un événement cible.

Ce message expliquera les méthodes pour déterminer si l'événement.Target a une classe particulière ou ne pas utiliser JavaScript.

Comment vérifier si l'événement.Target a une classe spécifique en utilisant JavaScript?

Pour déterminer si l'événement.Target a une classe particulière, utilisez les méthodes prédéfinies JavaScript suivantes:

• Contient () méthode
• Méthode Matches ()

Voyons comment ces méthodes fonctionnent pour déterminer la classe dans un événement.cible.

Méthode 1: Vérifiez si l'événement.Target a une classe spécifique à l'aide de la méthode contient ()

Pour déterminer si un élément appartient à une classe spécifique, utilisez le «contient()«Méthode du«liste de classe" objet. La méthode contient () est utilisée pour déterminer si un élément spécifié est présent dans la collection. Ses sorties «vrai«Si l'article est présent, sinon, il donne«FAUX". C'est le moyen le plus efficace pour déterminer la classe d'un élément.

Syntaxe

Suivez la syntaxe dirigée ci-dessous pour déterminer si l'événement.Target a une classe spécifique ou ne pas utiliser la méthode CONTAINS ():

événement.cible.liste de classe.contient ('class-name')

Dans la syntaxe ci-dessus:

• "événement.cible"Est un événement déclenché qui sera vérifié s'il contient la classe spécifique ou non.
• Le "nom du cours»Identifie le nom de la classe CSS qui fait partie de l'événement déclenché.

Valeur de retour

Il revient "vrai«Si l'événement déclenché a la classe spécifiée; Sinon, il revient "FAUX".

Exemple

Tout d'abord, créez trois "div»Éléments dans un fichier HTML à l'aide du HTML étiqueter:

1
2
3

Style les éléments en utilisant le style CSS. Pour ce faire, créez une classe CSS ".div"Pour tous les éléments div:

.div
rembourrage: 10px;
hauteur: 100px;
Largeur: 100px;
marge: 10px;

Créer un ".centre”Classe pour définir les éléments au centre de la page:

.centre
marge: auto;

Maintenant, pour le style, chaque div crée individuellement une classe CSS pour eux. Pour la première div, définissez la couleur d'arrière-plan "rouge" dans le "div1style" classe:

.div1style

Color d'arrière-plan: rouge;

Pour la deuxième div, définissez la couleur d'arrière-plan «radis rose" en utilisant le "RGBA (194, 54, 77)»Code dans le«div2style" classe:

.div2style

Color en arrière-plan: RVB (194, 54, 77);

Réglez la couleur d'arrière-plan "rose«Du troisième div en créant le«div3style" classe:

.div3style

Color en arrière-plan: rose;

Après avoir exécuté le code HTML ci-dessus, la sortie ressemblera à ceci:

Maintenant, dans un fichier JavaScript ou un «scénario”Tag, utilisez le code fourni ci-dessous pour vérifier si l'événement.La cible a une classe spécifique ou non:

document.addEventListener ('click', fonction handleclick (événement)
var hasclass = événement.cible.liste de classe.Contient ('Centre');
alert ("Ce div contient la classe du Centre ':" + Hasclass);
);

Dans l'extrait de code ci-dessus:

• Tout d'abord, joignez un écouteur d'événements sur un événement de clic qui gérera chaque clic sur Dom.
• Ensuite, vérifiez si l'événement déclenché a la classe CSS "centre"Ou pas avec l'aide du"liste de classe.classe()" méthode.

Sortir

Le GIF ci-dessus montre que Div1 contient le «centre"Classe comme ça montre"vrai», Tandis que Div2 et Div3 affichent«FAUX«Dans le boîtier d'alerte, ce qui signifie qu'ils ne contiennent pas le«centre" classe.

Méthode 2: Vérifiez si l'événement.Target a une classe spécifique en utilisant des matchs () méthode

Une autre méthode prédéfinie JavaScript appelée «allumettes()«Peut être utilisé pour vérifier si une classe spécifique appartient à un élément ou à un événement. Le "nom du cours"Est le seul paramètre nécessaire pour déterminer si un élément ou un événement cible comprend une certaine classe ou non.

Syntaxe

La syntaxe dirigée ci-dessous est utilisée pour la méthode Matchs ():

événement.cible.allumettes('.nom du cours')

Dans la syntaxe ci-dessus,

• "événement.cible"Est un événement déclenché qui sera vérifié s'il contient la classe spécifique ou non.
• Le "nom du cours»Indique le nom de la classe CSS qui fait partie de l'événement déclenché. La méthode Matches () porte le nom de la classe avec un point (.) Cela désigne le mot «classe".

Valeur de retour

Si l'événement cible a une classe, il revient "vrai" autre, "FAUX"Est retourné.

Exemple

Dans un fichier javascript ou une balise de script, utilisez les lignes de code ci-dessous pour vérifier si l'événement.La cible a une classe spécifique ou non en utilisant le «allumettes()" méthode:

document.addEventListener ('click', fonction handleclick (événement)
var hasclass = événement.cible.allumettes('.div3style ');
alert ("Cette classe de div correspond à la classe 'div3style':" + hasclass);
);

Dans les lignes de code ci-dessus:

• Tout d'abord, joignez un écouteur d'événements sur un événement de clic qui gérera chaque clic sur Dom.
• Ensuite, vérifiez si le «div3style«La classe CSS existe dans un événement déclenché en utilisant le«allumettes()" méthode.
• S'il est présent, l'alerte () montre un message avec «vrai", autre "FAUX".

Sortir

Le GIF ci-dessus montre que seul Div3 contient le «div3style"Classe comme ça montre"vrai".

Conclusion

Pour déterminer si un événement déclenché a une classe spécifiée, utilisez le JavaScript "contient()«Méthode ou le«allumettes()" méthode. Cependant, la méthode contient () est l'une des approches les plus utiles utilisées pour déterminer la classe d'un élément. Les deux méthodes reviennent "vrai"Si l'événement déclenché a une classe d'autre"FAUX"Est retourné. Ce message a expliqué les méthodes pour déterminer si l'événement.Target a une classe particulière ou ne pas utiliser JavaScript.