Bu gönderi, event.target'ın belirli bir sınıfa sahip olup olmadığını veya JavaScript kullanmadığını belirleme yöntemlerini açıklayacaktır.
Event.target'ın JavaScript Kullanarak Belirli Bir Sınıfı Olup Olmadığı Nasıl Kontrol Edilir?
event.target'ın belirli bir sınıfı olup olmadığını belirlemek için aşağıdaki önceden tanımlanmış JavaScript yöntemlerini kullanın:
Bir event.target'ta sınıfı belirlemek için bu yöntemlerin nasıl çalıştığını görelim.
Yöntem 1: event.target'ın Belirli bir Sınıfı olup olmadığını kontrol etmek için include() Yöntemini Kullanın
Bir elemanın belirli bir sınıfa ait olup olmadığını belirlemek için “ içerir() ' yöntemi' sınıfListesi ' nesne. include() yöntemi, koleksiyonda belirtilen bir öğenin mevcut olup olmadığını belirlemek için kullanılır. çıktıları” doğru ” öğe varsa, aksi takdirde “ yanlış ”. Bir elementin sınıfını belirlemenin en etkili yoludur.
Sözdizimi
event.target'ın belirli bir sınıfa sahip olup olmadığını, include() yöntemini kullanarak belirlemek için aşağıdaki sözdizimini izleyin:
Etkinlik. hedef . sınıfListesi . içerir ( 'sınıf adı' )Yukarıdaki sözdiziminde:
- “ olay.hedef ” belirli bir sınıfı içerip içermediği kontrol edilecek olan tetiklenmiş bir olaydır.
- “ sınıf adı ”, tetiklenen olayın bir parçası olan CSS sınıfının adını tanımlar.
Geri dönüş değeri
“ döndürür doğru ” tetiklenen olay belirtilen sınıfa sahipse; aksi takdirde, ' döndürür yanlış ”.
Örnek
İlk olarak, üç tane oluşturun ' div HTML kullanan bir HTML dosyasındaki öğeler CSS stilini kullanarak öğelere stil verin. Bunu yapmak için bir CSS sınıfı oluşturun ' .div ” tüm div öğeleri için: Oluşturmak ' .merkez ” sayfanın ortasındaki öğeleri ayarlamak için sınıf: Şimdi, stil için her div ayrı ayrı onlar için bir CSS sınıfı oluşturur. İlk div için arka plan rengini ayarlayın ' kırmızı ' içinde ' div1Style ' sınıf: İkinci div için arka plan rengini ayarlayın “ turp pembesi ' kullanmak ' rgba(194, 54, 77) ” kodu “ div2Style ' sınıf: Arka plan rengini ayarla “ pembe ” yaratarak üçüncü div'in “ div3Style ' sınıf: Yukarıdaki HTML kodunu çalıştırdıktan sonra çıktı şöyle görünecektir: Şimdi, bir JavaScript dosyasında veya bir “ senaryo ” etiketini kullanarak, event.target'ın belirli bir sınıfa sahip olup olmadığını kontrol etmek için aşağıdaki kodu kullanın: Yukarıdaki kod parçacığında: Çıktı Yukarıdaki GIF, div1'in “ merkez 'gösterildiği gibi sınıf' doğru ”, div2 ve div3 ise “ yanlış ” uyarı kutusunda, yani “ içermedikleri anlamına gelir. merkez ' sınıf. '' adlı başka bir JavaScript önceden tanımlanmış yöntemi maçlar() ”, belirli bir sınıfın bir öğeye mi yoksa bir olaya mı ait olduğunu kontrol etmek için kullanılabilir. “ sınıf adı ”, bir öğenin veya hedef olayın belirli bir sınıfı içerip içermediğini belirlemek için gereken tek parametredir. Sözdizimi Match() yöntemi için aşağıda verilen sözdizimi kullanılır: Yukarıdaki söz diziminde, Geri dönüş değeri Hedef olayın bir sınıfı varsa, ' doğru ' başka, ' yanlış ' Geri döndü. Bir JavaScript dosyasında veya bir komut dosyası etiketinde, aşağıdaki kod satırlarını kullanarak event.target'ın belirli bir sınıfa sahip olup olmadığını kontrol edin ' maçlar() ' yöntem: Yukarıdaki kod satırlarında: Çıktı Yukarıdaki GIF, yalnızca div3'ün ' div3Style 'gösterildiği gibi sınıf' doğru ”. Tetiklenen bir olayın belirli bir sınıfa sahip olup olmadığını belirlemek için JavaScript'i kullanın ' içerir() ” yöntemi veya “ maçlar() ' yöntem. Ancak, include() yöntemi, bir öğenin sınıfını belirlemek için kullanılan en yararlı yaklaşımlardan biridir. Her iki yöntem de ' doğru 'tetiklenen olayın başka bir sınıfı varsa' yanlış ' Geri döndü. Bu gönderi, event.target'ın belirli bir sınıfa sahip olup olmadığını veya JavaScript kullanıp kullanmadığını belirleme yöntemlerini açıkladı.
< div sınıf = 'div div2Style' İD = 'div2' > iki
< div sınıf = 'div div3Style' İD = 'div3' > 3
div >
div >
div >
dolgu malzemesi : 10 piksel ;
yükseklik : 100 piksel ;
Genişlik : 100 piksel ;
marj : 10 piksel ;
}
marj : Oto ;
}
{
arka fon - renk : kırmızı ;
}
{
arka fon - renk : rgb ( 194 , 54 , 77 ) ;
}
{
arka fon - renk : pembe ;
}
hasClass nerede = Etkinlik. hedef . sınıfListesi . içerir ( 'merkez' ) ;
Alarm ( 'Bu div 'merkez' sınıfı içeriyor: ' + hasClass ) ;
} ) ;
Yöntem 2: match() Yöntemini Kullanarak event.target'ın Belirli Bir Sınıfı Olup Olmadığını Kontrol Edin
Örnek
hasClass nerede = Etkinlik. hedef . maçlar ( '.div3Style' ) ;
Alarm ( 'Bu div'in sınıfı 'div3Style' sınıfıyla eşleşiyor: ' + hasClass ) ;
} ) ;
Çözüm