Controlla se evento.Target ha una classe specifica usando JavaScript

A volte, il programmatore potrebbe voler verificare se l'elemento che ha attivato l'evento (l'evento.target) corrisponde al selettore a cui tengono. Come fare questo? JavaScript offre alcuni metodi predefiniti come "contiene ()" E "corrispondenze ()"Metodi per identificare il selettore specifico in un evento target.

Questo post spiegherà i metodi per determinare se l'evento.Target ha una classe particolare o non utilizza JavaScript.

Come verificare se l'evento.Target ha una classe specifica usando JavaScript?

Per determinare se l'evento.Target ha una classe particolare, usa i seguenti metodi predefiniti JavaScript:

• contiene () metodo
• Metodo Matches ()

Vediamo come funzionano questi metodi per determinare la lezione in un evento.bersaglio.

Metodo 1: controlla se l'evento.Target ha una classe specifica usando contiene () metodo

Per determinare se un elemento appartiene a una classe specifica, usa il "contiene ()Metodo del "classlist"Oggetto. Il metodo contiene () viene utilizzato per identificare se un elemento specificato è presente nella raccolta. I suoi output "VERO"Se l'oggetto è presente, altrimenti, dà"falso". È il modo più efficiente per determinare la classe di un elemento.

Sintassi

Segui la sintassi di seguito per determinare se l'evento.Target ha una classe specifica o non utilizza il metodo contiene ():

evento.bersaglio.classlist.contiene ("nome-classe")

Nella sintassi sopra:

• "evento.bersaglio"È un evento attivato che verrà verificato se contiene la classe specifica o meno.
• IL "nome della classe"Identifica il nome della classe CSS che fa parte dell'evento attivato.

Valore di ritorno

Ritorna "VERO"Se l'evento attivato ha la classe specificata; Altrimenti, ritorna "falso".

Esempio

Innanzitutto, crea tre "div"Elementi in un file HTML utilizzando HTML etichetta:

1
2
3

Modella gli elementi usando lo stile CSS. Per fare ciò, crea una classe CSS ".div"Per tutti gli elementi Div:

.div
imbottitura: 10px;
Altezza: 100px;
larghezza: 100px;
Margine: 10px;

Creare un ".centro"Classe per l'impostazione degli elementi al centro della pagina:

.Centro
Margine: auto;

Ora, per lo styling, ogni div crea individualmente una classe CSS per loro. Per il primo div, imposta il colore di sfondo "rosso" nel "STILE DIV1" classe:

.STILE DIV1

Background-color: rosso;

Per il secondo div, imposta il colore di sfondo "rosa ravanello" usando il "RGBA (194, 54, 77)"Codice nel"Div2style" classe:

.Div2style

Background-color: RGB (194, 54, 77);

Imposta il colore di sfondo "rosa"Del terzo div creando il"stile div3" classe:

.stile div3

Background-color: Pink;

Dopo aver eseguito il codice HTML sopra, l'output sembrerà così:

Ora, in un file javascript o un "sceneggiatura"Tag, utilizzare il codice sotto fornito per verificare se l'evento.Target ha una classe specifica o no:

documento.addEventListener ('Click', Function HandleClick (evento)
var hasclass = evento.bersaglio.classlist.contiene ("centro");
Alert ("Questo div contiene" Center "Classe:" + Hasclass);
);

Nel frammento di codice sopra:

• Innanzitutto, allega un ascoltatore di eventi su un evento click che gestirà ogni clic su Dom.
• Quindi, controlla se l'evento attivato ha la classe CSS "centro"O no con l'aiuto di"classlist.classe()" metodo.

Produzione

La GIF sopra mostra che Div1 contiene il "centro"Classe come mostra"VERO", Mentre Disp2 e Div3 vengono visualizzati"falso"Nella scatola di allerta, il che significa che non contengono il"centro" classe.

Metodo 2: controlla se l'evento.Target ha una classe specifica usando il metodo Matches ()

Un altro metodo predefinito JavaScript chiamato "corrispondenze ()"Può essere utilizzato per verificare se una classe specifica appartiene a un elemento o un evento. IL "nome della classe"È l'unico parametro necessario per determinare se un elemento o un evento target include o meno una determinata classe.

Sintassi

La sintassi di seguito è utilizzata per il metodo Matches ():

evento.bersaglio.corrispondenze ('.nome della classe')

Nella sintassi sopra,

• "evento.bersaglio"È un evento attivato che verrà verificato se contiene la classe specifica o meno.
• IL "nome della classe"Indica il nome della classe CSS che fa parte dell'evento attivato. Il metodo Matches () prende il nome della classe insieme a un punto (.) che indica la parola "classe".

Valore di ritorno

Se l'evento target ha una classe, restituisce "VERO" altro, "falso"Viene restituito.

Esempio

In un file JavaScript o un tag script, utilizzare le righe di codice in basso per verificare se l'evento.Target ha una classe specifica o meno usando il "corrispondenze ()" metodo:

documento.addEventListener ('Click', Function HandleClick (evento)
var hasclass = evento.bersaglio.corrispondenze ('.Div3style ');
Avviso ("La classe di questo div corrisponde alla classe" Div3Style ":" + Hasclass);
);

Nelle righe di codice sopra:

• Innanzitutto, allega un ascoltatore di eventi su un evento click che gestirà ogni clic su Dom.
• Quindi, controlla se il "stile div3"La classe CSS esiste in un evento attivato usando il"corrispondenze ()" metodo.
• Se è presente, Alert () mostra un messaggio con "VERO", altro "falso".

Produzione

La GIF sopra mostra che solo Div3 contiene il "stile div3"Classe come mostra"VERO".

Conclusione

Per determinare se un evento attivato ha una classe specificata, usa JavaScript "contiene ()Metodo o il "corrispondenze ()" metodo. Tuttavia, il metodo contiene () è uno degli approcci più utili utilizzati per determinare la classe di un elemento. Entrambi i metodi ritornano "VERO"Se l'evento attivato ha un corso altro"falso"Viene restituito. Questo post ha spiegato i metodi per determinare se l'evento.Target ha una classe particolare o non utilizza JavaScript.