Sprawdź, czy zdarzenie.Target ma określoną klasę za pomocą JavaScript

Czasami programista może chcieć sprawdzić, czy element, który wywołał zdarzenie (zdarzenie.cel) pasuje do selektora, na którym zależy. Jak to zrobić? JavaScript oferuje niektóre predefiniowane metody, takie jak „zawiera()" I "mecze()„Metody identyfikacji określonego selektora w zdarzeniu docelowym.

Ten post wyjaśni metody ustalenia, czy zdarzenie.Target ma określoną klasę lub nie używa JavaScript.

Jak sprawdzić, czy zdarzenie.Target ma określoną klasę za pomocą JavaScript?

Aby ustalić, czy zdarzenie.Target ma określoną klasę, użyj następujących predefiniowanych metod JavaScript:

• zawiera metodę ()
• Metoda matches ()

Zobaczmy, jak te metody działają na określenie klasy w wydarzeniu.cel.

Metoda 1: Sprawdź, czy zdarzenie.Target ma określoną klasę przy użyciu metody zawierającej ()

Aby ustalić, czy element należy do określonej klasy, użyj „zawiera()„Metoda„Lista klas" obiekt. Metoda zawierająca () służy do określenia, czy określony element jest obecny w kolekcji. Jego wyniki „PRAWDA„Jeśli przedmiot jest obecny, w przeciwnym razie daje”FAŁSZ". Jest to najbardziej wydajny sposób na określenie klasy elementu.

Składnia

Postępuj zgodnie z poniższą składnią podaną, aby ustalić, czy zdarzenie.Target ma określoną klasę lub nie przy użyciu metody Conterains ():

wydarzenie.cel.Lista klas.zawiera („nazwa klas”)

W powyższej składni:

• "wydarzenie.cel”To wyzwalane wydarzenie, które zostanie sprawdzone, czy zawiera konkretną klasę, czy nie.
• „„Nazwa klasy”Identyfikuje nazwę klasy CSS, która jest częścią wyzwalanego wydarzenia.

Wartość zwracana

Powraca „PRAWDA„Jeśli zdarzenie wyzwalane ma określoną klasę; W przeciwnym razie powraca „FAŁSZ".

Przykład

Najpierw stwórz trzy „div”Elementy w pliku HTML za pomocą HTML etykietka:

1
2
3

Stylowanie elementów za pomocą stylizacji CSS. Aby to zrobić, stwórz klasę CSS ”.div„Dla wszystkich elementów DIV:

.div
Wyściółka: 10px;
Wysokość: 100px;
szerokość: 100px;
Margines: 10px;

Stwórz ".Centrum„Klasa do ustawiania elementów na środku strony:

.Centrum
Margines: Auto;

Teraz, dla stylizacji, każdy div indywidualnie tworzy dla nich klasę CSS. W przypadku pierwszego div ustaw kolor tła „czerwony" w "Div1Style" klasa:

.Div1Style

kolor tła: czerwony;

W przypadku drugiej div ustaw kolor tła „Rzodkie różowe" używając "RGBA (194, 54, 77)„Kod w„ „Div2Style" klasa:

.Div2Style

kolor tła: RGB (194, 54, 77);

Ustaw kolor tła „różowy”Trzeciego Div, tworząc„Div3Style" klasa:

.Div3Style

kolor tła: różowy;

Po uruchomieniu powyższego kodu HTML wyjście będzie wyglądało tak:

Teraz w pliku JavaScript lub „scenariusz”Tag, użyj poniżej wyprodukowanego kodu, aby sprawdzić, czy zdarzenie.Target ma określoną klasę, czy nie:

dokument.addEventListener („kliknij”, funkcja Handleclick (zdarzenie)
var hasclass = zdarzenie.cel.Lista klas.zawiera („Center”);
Alert („Ta div zawiera klasę„ Center ”:” + HASCLASS);
);

W powyższym fragmencie kodu:

• Najpierw załącz słuchacz zdarzeń do zdarzenia kliknięcia, które obsługuje każde kliknięcie DOM.
• Następnie sprawdź, czy wyzwalane wydarzenie ma klasę CSS „Centrum”Lub nie z pomocą„Lista klas.klasa()" metoda.

Wyjście

Powyższy GIF pokazuje, że Div1 zawiera „Centrum„Klasa, jak pokazuje”PRAWDA”, Podczas gdy Div2 i Div3 wyświetlają„FAŁSZ”W polu alertu, co oznacza, że ​​nie zawierają one„Centrum" klasa.

Metoda 2: Sprawdź, czy zdarzenie.Target ma określoną klasę przy użyciu metody Matches ()

Kolejna predefiniowana metoda JavaScript o nazwie „mecze()”Można użyć do sprawdzenia, czy określona klasa należy do elementu, czy zdarzenia. „„Nazwa klasy”Jest jedynym parametrem potrzebnym do ustalenia, czy element lub zdarzenie docelowe obejmuje określoną klasę, czy nie.

Składnia

Poniżej podana składnia jest wykorzystywana do metody Matches ():

wydarzenie.cel.mecze('.Nazwa klasy')

W powyższej składni,

• "wydarzenie.cel”To wyzwalane wydarzenie, które zostanie sprawdzone, czy zawiera konkretną klasę, czy nie.
• „„Nazwa klasy”Wskazuje nazwę klasy CSS, która jest częścią wywołanego zdarzenia. Metoda Matches () bierze nazwę klasy razem z kropką (.) To oznacza słowo „klasa".

Wartość zwracana

Jeśli zdarzenie docelowe ma klasę, powraca „PRAWDA" w przeciwnym razie, "FAŁSZ”Jest zwrócony.

Przykład

W pliku JavaScript lub znaczniku skryptu użyj poniższych wierszy kodu, aby sprawdzić, czy zdarzenie.Target ma określoną klasę lub nie przy użyciu „mecze()" metoda:

dokument.addEventListener („kliknij”, funkcja Handleclick (zdarzenie)
var hasclass = zdarzenie.cel.mecze('.div3Style ');
Alert („klasa tej div pasuje do klasy„ Div3Style ”:” + HASCLASS);
);

W powyższych wierszach kodu:

• Najpierw załącz słuchacz zdarzeń do zdarzenia kliknięcia, które obsługuje każde kliknięcie DOM.
• Następnie sprawdź, czy „Div3Style„Klasa CSS istnieje w wywołanym wydarzeniu za pomocą„mecze()" metoda.
• Jeśli jest obecny, alert () pokazuje wiadomość z „PRAWDA", w przeciwnym razie "FAŁSZ".

Wyjście

Powyższy GIF pokazuje, że tylko div3 zawiera „Div3Style„Klasa, jak pokazuje”PRAWDA".

Wniosek

Aby ustalić, czy zdarzenie uruchamiane ma określoną klasę, użyj JavaScript „zawiera()”Metoda lub„mecze()" metoda. Jednak metoda zawierająca () jest jednym z najbardziej przydatnych podejść zastosowanych do określenia klasy elementu. Obie metody powracają „PRAWDA„Jeśli wyzwalane wydarzenie ma klasę inną”FAŁSZ”Jest zwrócony. W tym poście wyjaśniono metody ustalenia, czy zdarzenie.Target ma określoną klasę lub nie używa JavaScript.