Ten post wyjaśni metody określania, czy event.target ma określoną klasę, czy nie, używając JavaScript.
Jak sprawdzić, czy event.target ma określoną klasę za pomocą JavaScript?
Aby określić, czy obiekt event.target ma określoną klasę, użyj następujących predefiniowanych metod JavaScript:
Zobaczmy, jak działają te metody przy określaniu klasy w obiekcie event.target.
Metoda 1: Sprawdź, czy event.target ma określoną klasę, używając metody zawiera().
Aby określić, czy element należy do określonej klasy, użyj „ zawiera() „metoda” lista klas ' obiekt. Metoda zawiera() służy do określenia, czy określony element znajduje się w kolekcji. Jego wyniki „ PRAWDA ” jeśli przedmiot jest obecny, w przeciwnym razie daje „ fałszywy ”. Jest to najskuteczniejszy sposób określania klasy elementu.
Składnia
Postępuj zgodnie z podaną poniżej składnią, aby określić, czy event.target ma określoną klasę, czy nie, używając metody zawiera() :
wydarzenie. cel . lista klas . zawiera ( 'Nazwa klasy' )W powyższej składni:
- “ zdarzenie.cel ” to wyzwalane zdarzenie, które zostanie sprawdzone, czy zawiera określoną klasę, czy nie.
- „ Nazwa klasy ” identyfikuje nazwę klasy CSS, która jest częścią wyzwalanego zdarzenia.
Zwracana wartość
zwraca „ PRAWDA ” jeśli wyzwalane zdarzenie ma określoną klasę; w przeciwnym razie zwraca „ fałszywy ”.
Przykład
Najpierw utwórz trzy „ dz ” w pliku HTML przy użyciu formatu HTML
< dz klasa = 'div div2Style' ID = „dział2” > dwa
< dz klasa = 'div div3Styl' ID = 'dział3' > 3
dz >
dz >
dz >
Stylizuj elementy za pomocą stylów CSS. Aby to zrobić, utwórz klasę CSS „ .dział ” dla wszystkich elementów div:
. dz {wyściółka : 10 piks ;
wzrost : 100 pikseli ;
szerokość : 100 pikseli ;
margines : 10 piks ;
}
Stwórz ' .środek ” klasa do ustawienia elementów na środku strony:
. środek {margines : automatyczny ;
}
Teraz, w celu stylizacji, każdy element div indywidualnie tworzy dla niego klasę CSS. Dla pierwszego elementu div ustaw kolor tła „ czerwony ' w ' styl div1 ' klasa:
. styl div1{
tło - kolor : czerwony ;
}
Dla drugiego elementu div ustaw kolor tła „ rzodkiewka różowa ' używając ' rgba(194, 54, 77) ”kod w” styl div2 ' klasa:
. styl div2{
tło - kolor : rgb ( 194 , 54 , 77 ) ;
}
Ustaw kolor tła „ różowy ” trzeciego elementu div, tworząc „ styl div3 ' klasa:
. styl div3{
tło - kolor : różowy ;
}
Po uruchomieniu powyższego kodu HTML wynik będzie wyglądał następująco:
Teraz w pliku JavaScript lub „ scenariusz ”, użyj poniższego kodu, aby sprawdzić, czy event.target ma określoną klasę, czy nie:
dokument. addEventListener ( 'Kliknij' , funkcja uchwytKliknij ( wydarzenie ) {gdzie maKlasę = wydarzenie. cel . lista klas . zawiera ( 'środek' ) ;
alarm ( „Ten div zawiera klasę„ środkową ”: „ + maKlasę ) ;
} ) ;
W powyższym fragmencie kodu:
- Najpierw dołącz detektor zdarzeń do zdarzenia kliknięcia, który będzie obsługiwał każde kliknięcie DOM.
- Następnie sprawdź, czy wyzwalane zdarzenie ma klasę CSS „ środek ” lub nie przy pomocy „ classList.class() ' metoda.
Wyjście
Powyższy GIF pokazuje, że div1 zawiera „ środek „klasa, jak pokazuje” PRAWDA ”, podczas gdy div2 i div3 wyświetlają „ fałszywy ” w polu alertu, co oznacza, że nie zawierają one „ środek ' klasa.
Metoda 2: Sprawdź, czy event.target ma określoną klasę za pomocą metody match().
Inna predefiniowana metoda JavaScript o nazwie „ mecze() ” można użyć do sprawdzenia, czy dana klasa należy do elementu lub zdarzenia. „ Nazwa klasy ” to jedyny parametr potrzebny do określenia, czy element lub zdarzenie docelowe zawiera określoną klasę, czy nie.
Składnia
Podana poniżej składnia jest używana dla metody match() :
wydarzenie. cel . mecze ( '.Nazwa klasy' )W powyższej składni
- “ zdarzenie.cel ” to wyzwalane zdarzenie, które zostanie sprawdzone, czy zawiera określoną klasę, czy nie.
- „ Nazwa klasy ” wskazuje nazwę klasy CSS, która jest częścią wyzwalanego zdarzenia. Metoda match() łączy nazwę klasy z kropką (.), która oznacza słowo „ klasa ”.
Zwracana wartość
Jeśli zdarzenie docelowe ma klasę, zwraca „ PRAWDA ' w przeciwnym razie, ' fałszywy ” jest zwracany.
Przykład
W pliku JavaScript lub tagu skryptu użyj poniższych wierszy kodu, aby sprawdzić, czy event.target ma określoną klasę, czy nie, używając „ mecze() ' metoda:
dokument. addEventListener ( 'Kliknij' , funkcja uchwytKliknij ( wydarzenie ) {gdzie maKlasę = wydarzenie. cel . mecze ( „.div3Styl” ) ;
alarm ( „Klasa tego elementu div jest zgodna z klasą„ div3Style ”: „ + maKlasę ) ;
} ) ;
W powyższych liniach kodu:
- Najpierw dołącz detektor zdarzeń do zdarzenia kliknięcia, który będzie obsługiwał każde kliknięcie DOM.
- Następnie sprawdź, czy „ styl div3 ” Klasa CSS istnieje w zdarzeniu wyzwalanym za pomocą „ mecze() ' metoda.
- Jeśli jest obecny, alert() wyświetla komunikat z „ PRAWDA ', w przeciwnym razie ' fałszywy ”.
Wyjście
Powyższy GIF pokazuje, że tylko div3 zawiera „ styl div3 „klasa, jak pokazuje” PRAWDA ”.
Wniosek
Aby określić, czy wyzwalane zdarzenie ma określoną klasę, użyj kodu JavaScript „ zawiera() ” metoda lub „ mecze() ' metoda. Jednak metoda zawiera() jest jednym z najbardziej użytecznych podejść używanych do określania klasy elementu. Obie metody zwracają „ PRAWDA ” jeśli wyzwalane zdarzenie ma klasę else ” fałszywy ” jest zwracany. W tym poście wyjaśniono metody określania, czy event.target ma określoną klasę, czy nie, używając JavaScript.