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:
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:
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:
1Stylowanie elementów za pomocą stylizacji CSS. Aby to zrobić, stwórz klasę CSS ”.div„Dla wszystkich elementów DIV:
.divStwórz ".Centrum„Klasa do ustawiania elementów na środku strony:
.CentrumTeraz, dla stylizacji, każdy div indywidualnie tworzy dla nich klasę CSS. W przypadku pierwszego div ustaw kolor tła „czerwony" w "Div1Style" klasa:
.Div1StyleW przypadku drugiej div ustaw kolor tła „Rzodkie różowe" używając "RGBA (194, 54, 77)„Kod w„ „Div2Style" klasa:
.Div2StyleUstaw kolor tła „różowy”Trzeciego Div, tworząc„Div3Style" klasa:
.Div3StylePo 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)W powyższym fragmencie kodu:
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,
Wartość zwracana
Jeśli zdarzenie docelowe ma klasę, powraca „PRAWDA" w przeciwnym razie, "FAŁSZ”Jest zwrócony.
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)W powyższych wierszach kodu:
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.