Überprüfen Sie, ob Ereignis.Target hat eine bestimmte Klasse mit JavaScript

Manchmal möchte der Programmierer möglicherweise überprüfen, ob das Element, das das Ereignis ausgelöst hat (das Ereignis.Ziel) entspricht dem Selektor, den sie interessieren. Wie macht man das? JavaScript bietet einige vordefinierte Methoden wie “enthält ()" Und "Streichhölzer()Methoden zur Identifizierung des spezifischen Selektors in einem Zielereignis.

In diesem Beitrag werden die Methoden erläutert, um festzustellen, ob das Ereignis.Target hat eine bestimmte Klasse oder verwendet JavaScript nicht.

So überprüfen Sie, ob Ereignis.Target hat eine bestimmte Klasse mit JavaScript?

Um festzustellen, ob das Ereignis.Target hat eine bestimmte Klasse. Verwenden Sie die folgenden vordefinierten JavaScript -Methoden:

• enthält () Methode
• Matches () Methode

Mal sehen, wie diese Methoden zur Bestimmung der Klasse in einem Ereignis funktionieren.Ziel.

Methode 1: Überprüfen Sie, ob Ereignis.Target hat eine bestimmte Klasse mithilfe der containes () -Methode

Um festzustellen, ob ein Element zu einer bestimmten Klasse gehört, verwenden Sie die “enthält ()"Methode der"Klasse" Objekt. Die Methode containes () wird verwendet, um festzustellen, ob in der Sammlung ein bestimmtes Element vorhanden ist. Seine Ausgänge “WAHR"Wenn der Artikel vorhanden ist, gibt es sonst"FALSCH”. Es ist die effizienteste Möglichkeit, die Klasse eines Elements zu bestimmen.

Syntax

Befolgen Sie die untergegebene Syntax, um festzustellen, ob das Ereignis.Target hat eine bestimmte Klasse oder verwendet die Methode contains ():

Fall.Ziel.Klasse.enthält ('Klassenname')

In der obigen Syntax:

• “Fall.ZielIst ein ausgelöstes Ereignis, das überprüft wird, ob es die bestimmte Klasse enthält oder nicht.
• Der "KlassennameIdentifiziert den Namen der CSS -Klasse, die Teil des ausgelösten Ereignisses ist.

Rückgabewert

Es kehrt zurück “WAHRWenn das ausgelöste Ereignis die angegebene Klasse hat; Ansonsten kehrt es zurück “FALSCH”.

Beispiel

Erstellen Sie zuerst drei “divElemente in einer HTML -Datei mithilfe der HTML Schild:

1
2
3

Stylen Sie die Elemente mit CSS -Styling. Erstellen Sie dazu eine CSS -Klasse “.div”Für alle Divelemente:

.div
Polsterung: 10px;
Höhe: 100px;
Breite: 100px;
Rand: 10px;

Ein ... kreieren ".CenterKlasse zum Einstellen der Elemente in der Mitte der Seite:

.Center
Rand: Auto;

Für das Styling schafft jeder Div einzeln eine CSS -Klasse für sie. Setzen Sie für die erste Div die Hintergrundfarbe "Rot" im "Div1Style" Klasse:

.Div1Style

Hintergrundfarbe: Rot;

Setzen Sie für die zweite Div die Hintergrundfarbe "Radieschenrosa" Verwendung der "RGBA (194, 54, 77)”Code in“Div2Style" Klasse:

.Div2Style

Hintergrundfarbe: RGB (194, 54, 77);

Stellen Sie die Hintergrundfarbe ein “Rosa”Des dritten Divs durch Erstellen der“Div3Style" Klasse:

.Div3Style

Hintergrundfarbe: Pink;

Nach dem Ausführen des oben genannten HTML -Code sieht die Ausgabe so aus:

Jetzt in einer JavaScript -Datei oder in einer “Skript”Tag, verwenden Sie den folgenden Code, um zu überprüfen, ob das Ereignis.Ziel hat eine bestimmte Klasse oder nicht:

dokumentieren.AddEventListener ('Click', Function HandleClick (Ereignis)
var hasclass = Ereignis.Ziel.Klasse.enthält ('Mitte');
Alert ("Diese DIV enthält 'Center' Class:" + Hasclass);
);

Im obigen Code -Snippet:

• Fügen Sie zunächst einen Ereignishörer in einem Klickereignis hinzu, das jeden Klick auf DOM behandelt.
• Überprüfen Sie dann, ob das ausgelöste Ereignis die CSS -Klasse hatCenter"Oder nicht mit Hilfe des"Klasse.Klasse()" Methode.

Ausgang

Das obige GIF zeigt, dass Div1 das enthält “Center"Klasse, wie es zeigt"WAHR", Während Div2 und Div3 anzeigen"FALSCHIn der Alarmbox, was bedeutet, dass sie das nicht enthalten "Center" Klasse.

Methode 2: Überprüfen Sie, ob Ereignis.Target hat eine bestimmte Klasse mit der Methode () -Methode

Eine andere vordefinierte JavaScript -Methode namens “Streichhölzer()Kann verwendet werden, um zu überprüfen, ob eine bestimmte Klasse zu einem Element oder einem Ereignis gehört. Der "KlassennameIst der einzige Parameter, der erforderlich ist, um festzustellen, ob ein Element oder ein Zielereignis eine bestimmte Klasse enthält oder nicht.

Syntax

Die untergegebene Syntax wird für die Matches () -Methode verwendet:

Fall.Ziel.Streichhölzer('.Klassenname')

In der obigen Syntax,

• “Fall.ZielIst ein ausgelöstes Ereignis, das überprüft wird, ob es die bestimmte Klasse enthält oder nicht.
• Der "Klassenname”Zeigt den Namen der CSS -Klasse an, die Teil des ausgelösten Ereignisses ist. Die Methode () -Methode nimmt den Namen der Klasse zusammen mit einem Punkt (.) Das bedeutet das Wort “Klasse”.

Rückgabewert

Wenn das Zielereignis eine Klasse hat, gibt es zurück “WAHR" 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 Ereignis.Target hat eine bestimmte Klasse oder nicht durch die Verwendung der “Streichhölzer()" Methode:

dokumentieren.AddEventListener ('Click', Function HandleClick (Ereignis)
var hasclass = Ereignis.Ziel.Streichhölzer('.Div3Style ');
Alert ("Die Klasse dieser Div entspricht der 'Div3Style -Klasse:" + Hasclass);
);

In den obigen Codezeilen:

• Fügen Sie zunächst einen Ereignishörer in einem Klickereignis hinzu, das jeden Klick auf DOM behandelt.
• Überprüfen Sie dann, ob die “Div3StyleCSS -Klasse existiert in einem ausgelösten Ereignis mit der “Streichhölzer()" Methode.
• Wenn es vorhanden ist, zeigt der Alert () eine Nachricht mit “WAHR", anders "FALSCH”.

Ausgang

Das obige GIF zeigt, dass nur Div3 das enthält “Div3Style"Klasse, wie es zeigt"WAHR”.

Abschluss

Um festzustellen, ob ein ausgelöstes Ereignis über eine bestimmte Klasse verfügt, verwenden Sie das JavaScriptenthält ()”Methode oder die“Streichhölzer()" Methode. Die Methode containes () ist jedoch eine der nützlichsten Ansätze, die zur Bestimmung der Klasse eines Elements verwendet werden. Beide Methoden kehren zurück “WAHR"Wenn das ausgelöste Ereignis sonst eine Klasse hat"FALSCH" ist zurück gekommen. In diesem Beitrag wurde die Methoden erläutert, um festzustellen, ob das Ereignis.Target hat eine bestimmte Klasse oder verwendet JavaScript nicht.