Sjekk om hendelsen.Target har en spesifikk klasse ved hjelp av JavaScript

Noen ganger kan det hende at programmereren vil sjekke om elementet som utløste hendelsen (hendelsen.mål) samsvarer med velgeren de bryr seg om. Hvordan gjøre dette? JavaScript tilbyr noen forhåndsdefinerte metoder som "inneholder ()”Og“fyrstikker()”Metoder for å identifisere den spesifikke velgeren i en målhendelse.

Dette innlegget vil forklare metodene for å avgjøre om hendelsen.Target har en bestemt klasse eller ikke ved bruk av JavaScript.

Hvordan sjekke om hendelsen.Target har en spesifikk klasse ved hjelp av JavaScript?

For å avgjøre om hendelsen.Target har en bestemt klasse, bruk følgende JavaScript forhåndsdefinerte metoder:

• inneholder () -metode
• Matches () -metode

La oss se hvordan disse metodene fungerer for å bestemme klasse i en hendelse.mål.

Metode 1: Sjekk om hendelsen.Mål har en spesifikk klasse som bruker inneholder () -metode

For å bestemme om et element tilhører en spesifikk klasse, bruk "inneholder ()”Metode for“Klasseliste”Objekt. Contains () -metoden brukes til å identifisere om et spesifisert element er til stede i samlingen. Dets utganger “ekte”Hvis varen er til stede, ellers, gir det“falsk”. Det er den mest effektive måten å bestemme et elementklasse på.

Syntaks

Følg syntaksen under gitt for å avgjøre om hendelsen.Mål har en spesifikk klasse eller ikke ved bruk av contactions () -metoden:

begivenhet.mål.Klasseliste.inneholder ('klassenavn')

I syntaks ovenfor:

• “begivenhet.mål”Er en utløst hendelse som vil bli sjekket om den inneholder den spesifikke klassen eller ikke.
• “klassenavn”Identifiserer navnet på CSS -klassen som er en del av den utløste hendelsen.

Returverdi

Det kommer tilbake “ekte”Hvis den utløste hendelsen har den spesifiserte klassen; Ellers kommer det tilbake “falsk”.

Eksempel

Først må du lage tre “div”Elementer i en HTML -fil ved hjelp av HTML stikkord:

1
2
3

Style elementene ved hjelp av CSS -styling. For å gjøre det, lag en CSS -klasse “.div”For alle divelementene:

.div
polstring: 10px;
Høyde: 100px;
Bredde: 100px;
Margin: 10px;

Lage en ".senter”Klasse for å sette elementene i midten av siden:

.senter
Margin: Auto;

Nå, for styling, skaper hver div individuelt en CSS -klasse for dem. For den første diven, sett bakgrunnsfargen “rød”I“Div1Style”Klasse:

.Div1Style

bakgrunnsfarge: rød;

For den andre diven, sett bakgrunnsfargen “reddisk rosa" bruker "RGBA (194, 54, 77)”Kode i“Div2Style”Klasse:

.Div2Style

bakgrunnsfarge: RGB (194, 54, 77);

Angi bakgrunnsfargen “rosa”Av den tredje div ved å opprette“Div3Style”Klasse:

.Div3Style

bakgrunnsfarge: rosa;

Etter å ha kjørt ovennevnte HTML -kode, vil utdataene se slik ut:

Nå, i en JavaScript -fil eller en “manus”Tag, bruk koden under for å sjekke om hendelsen.Target har en spesifikk klasse eller ikke:

dokument.AddEventListener ('Klikk', funksjon HandleClick (hendelse)
var hasclass = event.mål.Klasseliste.inneholder ('Center');
Alert ("Denne div inneholder 'Center' klasse:" + hasclass);
);

I ovennevnte kodebit:

• Først må du legge ved en hendelseslytter på et klikkhendelse som vil håndtere hvert klikk på DOM.
• Kontroller deretter om den utløste hendelsen har CSS -klassen "senter”Eller ikke ved hjelp av“Klasseliste.klasse()”Metode.

Produksjon

Ovennevnte GIF viser at Div1 inneholder "senter”Klasse som det viser“ekte”, Mens Div2 og Div3 viser“falsk”I varslingsboksen, noe som betyr at de ikke inneholder“senter”Klasse.

Metode 2: Sjekk om hendelsen.Target har en spesifikk klasse ved bruk av matches () -metode

En annen JavaScript forhåndsdefinert metode kalt “fyrstikker()”Kan brukes til å sjekke om en bestemt klasse tilhører et element eller en hendelse. “klassenavn”Er den eneste parameteren som trengs for å avgjøre om et element eller en målhendelse inkluderer en viss klasse eller ikke.

Syntaks

Den undergitte syntaks brukes for matches () -metoden:

begivenhet.mål.fyrstikker('.klassenavn')

I syntaks ovenfor,

• “begivenhet.mål”Er en utløst hendelse som vil bli sjekket om den inneholder den spesifikke klassen eller ikke.
• “klassenavn”Indikerer navnet på CSS -klassen som er en del av den utløste hendelsen. Matches () -metoden tar klassens navn sammen med en prikk (.) som betegner ordet “klasse”.

Returverdi

Hvis målhendelsen har en klasse, kommer den tilbake “ekte”Annet,“falsk”Er returnert.

Eksempel

I en JavaScript -fil eller en skriptet merke, bruk kodelinjene for å sjekke om hendelsen.Target har en spesifikk klasse eller ikke ved å bruke “fyrstikker()”Metode:

dokument.AddEventListener ('Klikk', funksjon HandleClick (hendelse)
var hasclass = event.mål.fyrstikker('.div3Style ');
Alert ("Denne divens klasse samsvarer med 'Div3Style' -klassen:" + Hasclass);
);

I kodelinjene ovenfor:

• Først må du legge ved en hendelseslytter på et klikkhendelse som vil håndtere hvert klikk på DOM.
• Kontroller deretter om “Div3Style”CSS -klasse eksisterer i en utløst hendelse ved bruk av“fyrstikker()”Metode.
• Hvis det er til stede, viser varselet () en melding med "ekte”, Ellers“falsk”.

Produksjon

Ovennevnte GIF viser at bare DIV3 inneholder "Div3Style”Klasse som det viser“ekte”.

Konklusjon

For å avgjøre om en utløst hendelse har en spesifisert klasse, bruk JavaScript “inneholder ()”Metode eller“fyrstikker()”Metode. Imidlertid er contacts () -metoden en av de mest nyttige tilnærmingene som brukes for å bestemme et elements klasse. Begge metodene returnerer “ekte”Hvis den utløste hendelsen har en klasse ellers”falsk”Er returnert. Dette innlegget forklarte metodene for å avgjøre om hendelsen.Target har en bestemt klasse eller ikke ved bruk av JavaScript.