Ellenőrizze, hogy az event.target rendelkezik-e JavaScriptet használó meghatározott osztályával

Stíluszhatja az elemeket CSS-stílussal. Ehhez hozzon létre egy CSS-osztályt ' .div ” az összes div elemhez:

Hozzon létre egy ' .központ ” osztály az oldal közepén lévő elemek beállításához:

Most a stílushoz minden div külön-külön létrehoz egy CSS-osztályt. Az első divnél állítsa be a háttérszínt ' piros ' ban,-ben ' div1Style ' osztály:

A második divnél állítsa be a háttérszínt ' retek rózsaszín ' használni a ' rgba(194, 54, 77) ' kód a ' div2Style ' osztály:

Állítsa be a háttérszínt ' rózsaszín ' a harmadik divből a ' div3Style ' osztály:

A fenti HTML-kód futtatása után a kimenet így fog kinézni:

Most egy JavaScript fájlban vagy egy „ forgatókönyv ” címkét, használja az alábbi kódot annak ellenőrzésére, hogy az event.targetnek van-e egy adott osztálya vagy sem:

A fenti kódrészletben:

• Először csatoljon egy eseményfigyelőt egy kattintási eseményhez, amely minden DOM-ra leadott kattintást kezel.
• Ezután ellenőrizze, hogy a kiváltott esemény rendelkezik-e CSS osztályú ' központ 'vagy nem a ' classList.class() ” módszerrel.

Kimenet

A fenti GIF azt mutatja, hogy a div1 tartalmazza a ' központ ' osztály ahogyan látszik ' igaz ”, míg a div2 és div3 a „ hamis ' a figyelmeztető mezőben, ami azt jelenti, hogy nem tartalmazzák a ' központ ' osztály.

2. módszer: Ellenőrizze, hogy az event.target-nek van-e meghatározott osztálya a matches() metódus használatával

Egy másik JavaScript előre definiált metódus, a ' egyezés() ” segítségével ellenőrizhető, hogy egy adott osztály egy elemhez vagy eseményhez tartozik-e. Az ' osztály név ” az egyetlen paraméter annak meghatározásához, hogy egy elem vagy egy célesemény tartalmaz-e egy bizonyos osztályt vagy sem.

Szintaxis

A matches() metódushoz az alábbi szintaxist használjuk:

A fenti szintaxisban

• ' esemény.célpont ” egy kiváltott esemény, amely ellenőrzi, hogy tartalmazza-e az adott osztályt vagy sem.
• Az ' osztály név ” a kiváltott esemény részét képező CSS-osztály nevét jelzi. A matches() metódus az osztály nevét egy ponttal (.) együtt veszi, amely a ' szót jelöli osztály ”.

Visszatérési érték

Ha a céleseménynek van osztálya, akkor a következőt adja vissza: igaz ' más, ' hamis ” visszakerül.

Példa

JavaScript-fájlban vagy szkriptcímkében használja az alábbi kódsorokat annak ellenőrzésére, hogy az event.targetnek van-e egy adott osztálya, vagy sem a ' egyezés() ” módszer:

A fenti kódsorokban:

• Először csatoljon egy eseményfigyelőt egy kattintási eseményhez, amely minden DOM-ra leadott kattintást kezel.
• Ezután ellenőrizze, hogy a „ div3Style ' A CSS osztály létezik egy aktivált eseményben a ' egyezés() ” módszerrel.
• Ha jelen van, az alert() egy üzenetet jelenít meg a következővel: igaz ', más ' hamis ”.

Kimenet

A fenti GIF azt mutatja, hogy csak a div3 tartalmazza a ' div3Style ' osztály ahogyan látszik ' igaz ”.

Következtetés

Annak megállapításához, hogy egy aktivált eseménynek van-e meghatározott osztálya, használja a JavaScript ' tartalmazza () ' módszer vagy a ' egyezés() ” módszerrel. Azonban a include() metódus az egyik leghasznosabb módszer egy elem osztályának meghatározására. Mindkét módszer visszatér ' igaz 'ha a kiváltott eseménynek más osztálya van' hamis ” visszakerül. Ez a bejegyzés ismerteti azokat a módszereket, amelyek segítségével megállapítható, hogy az event.targetnek van-e egy adott osztálya, vagy nem használ JavaScriptet.