Überprüfen Sie, ob event.target eine bestimmte Klasse hat, die JavaScript verwendet

Gestalten Sie die Elemente mit CSS-Styling. Erstellen Sie dazu eine CSS-Klasse „ .div ” für alle div-Elemente:

Ein ... kreieren ' .Center ”-Klasse zum Setzen der Elemente in die Mitte der Seite:

Zum Stylen erstellt nun jedes div einzeln eine CSS-Klasse für sie. Legen Sie für das erste div die Hintergrundfarbe „ rot ' in dem ' div1Stil ' Klasse:

Legen Sie für das zweite div die Hintergrundfarbe „ Rettich rosa ' Verwendung der ' rgb(194, 54, 77) ” Code im “ div2Style ' Klasse:

Legen Sie die Hintergrundfarbe fest “ rosa “ des dritten div durch Erstellen des „ div3Style ' Klasse:

Nach dem Ausführen des obigen HTML-Codes sieht die Ausgabe so aus:

Nun, in einer JavaScript-Datei oder einem „ Skript ”-Tag verwenden Sie den unten bereitgestellten Code, um zu überprüfen, ob das event.target eine bestimmte Klasse hat oder nicht:

Im obigen Code-Snippet:

• Hängen Sie zunächst einen Ereignis-Listener an ein Klickereignis an, das jeden Klick auf DOM verarbeitet.
• Überprüfen Sie dann, ob das ausgelöste Ereignis die CSS-Klasse „ Center “ oder nicht mit Hilfe des „ klassenliste.klasse() ' Methode.

Ausgabe

Das obige GIF zeigt, dass div1 das „ Center „Klasse wie es sich zeigt“ Stimmt “, während div2 und div3 „ FALSCH “ im Warnfeld, was bedeutet, dass sie nicht das „ Center ' Klasse.

Methode 2: Überprüfen Sie, ob event.target eine bestimmte Klasse hat, indem Sie die Methode matchs() verwenden

Eine weitere vordefinierte JavaScript-Methode namens „ Streichhölzer() “ kann verwendet werden, um zu prüfen, ob eine bestimmte Klasse zu einem Element oder einem Ereignis gehört. Das ' Klassenname “ ist der einzige Parameter, der benötigt wird, um festzustellen, ob ein Element oder ein Zielereignis eine bestimmte Klasse enthält oder nicht.

Syntax

Die unten angegebene Syntax wird für die Methode matchs() verwendet:

In der obigen Syntax,

• „ ereignis.ziel “ ist ein ausgelöstes Ereignis, das überprüft wird, ob es die spezifische Klasse enthält oder nicht.
• Das ' Klassenname “ gibt den Namen der CSS-Klasse an, die Teil des ausgelösten Ereignisses ist. Die Methode matchs() nimmt den Namen der Klasse zusammen mit einem Punkt (.), der das Wort „ Klasse “.

Rückgabewert

Wenn das Zielereignis eine Klasse hat, gibt es „ Stimmt ' anders, ' FALSCH ' ist zurück gekommen.

Beispiel

Verwenden Sie in einer JavaScript-Datei oder einem Skript-Tag die folgenden Codezeilen, um zu überprüfen, ob das event.target eine bestimmte Klasse hat oder nicht, indem Sie das „ Streichhölzer() ' Methode:

In den obigen Codezeilen:

• Hängen Sie zunächst einen Ereignis-Listener an ein Klickereignis an, das jeden Klick auf DOM verarbeitet.
• Prüfen Sie dann, ob „ div3Style ” CSS-Klasse existiert in einem ausgelösten Ereignis mit dem “ Streichhölzer() ' Methode.
• Wenn es vorhanden ist, zeigt alert() eine Nachricht mit „ Stimmt ', anders ' FALSCH “.

Ausgabe

Das obige GIF zeigt, dass nur div3 das „ div3Style „Klasse wie es sich zeigt“ Stimmt “.

Fazit

Um festzustellen, ob ein ausgelöstes Ereignis eine bestimmte Klasse hat, verwenden Sie das JavaScript „ enthält() “ Methode oder die „ Streichhölzer() ' Methode. Die Methode contains() ist jedoch einer der nützlichsten Ansätze, um die Klasse eines Elements zu bestimmen. Beide Methoden geben „ Stimmt ” wenn das ausgelöste Ereignis eine Klasse hat, sonst “ FALSCH ' ist zurück gekommen. In diesem Beitrag wurden die Methoden erläutert, mit denen mithilfe von JavaScript festgestellt werden kann, ob das event.target eine bestimmte Klasse hat oder nicht.