यह पोस्ट यह निर्धारित करने के तरीकों की व्याख्या करेगी कि क्या event.target में एक विशेष वर्ग है या जावास्क्रिप्ट का उपयोग नहीं कर रहा है।
कैसे जांचें कि क्या event.target में जावास्क्रिप्ट का उपयोग करने वाला एक विशिष्ट वर्ग है?
यह निर्धारित करने के लिए कि क्या event.target में कोई विशेष वर्ग है, निम्न JavaScript पूर्वनिर्धारित विधियों का उपयोग करें:
आइए देखें कि ये तरीके किसी इवेंट.टारगेट में क्लास निर्धारित करने के लिए कैसे काम करते हैं।
विधि 1: जांचें कि क्या event.target में एक विशिष्ट वर्ग है, जिसमें शामिल है () विधि का उपयोग करना
यह निर्धारित करने के लिए कि कोई तत्व किसी विशिष्ट वर्ग से संबंधित है, 'का उपयोग करें' रोकना() 'का तरीका' वर्ग सूची ' वस्तु। सम्मिलित () विधि का उपयोग यह पहचानने के लिए किया जाता है कि संग्रह में कोई निर्दिष्ट वस्तु मौजूद है या नहीं। इसके आउटपुट ' सच 'यदि आइटम मौजूद है, अन्यथा, यह देता है' असत्य ”। किसी तत्व के वर्ग का निर्धारण करने के लिए यह सबसे कारगर तरीका है।
वाक्य - विन्यास
यह निर्धारित करने के लिए नीचे दिए गए सिंटैक्स का पालन करें कि क्या event.target में एक विशिष्ट वर्ग है या नहीं () विधि का उपयोग कर रहा है:
प्रतिस्पर्धा। लक्ष्य . वर्ग सूची . रोकना ( 'कक्षा का नाम' )उपरोक्त सिंटैक्स में:
- ' घटना लक्ष्य ' एक ट्रिगर घटना है जिसे जांचा जाएगा कि इसमें विशिष्ट वर्ग शामिल है या नहीं।
- ' कक्षा का नाम 'सीएसएस वर्ग के नाम की पहचान करता है जो ट्रिगर किए गए ईवेंट का एक हिस्सा है।
प्रतिलाभ की मात्रा
लौटता है' सच ” यदि ट्रिगर किए गए ईवेंट में निर्दिष्ट वर्ग है; अन्यथा, यह वापस आ जाता है ' असत्य ”।
उदाहरण
सबसे पहले, तीन बनाएँ ' डिव HTML का उपयोग करके HTML फ़ाइल में तत्व <दिव> उपनाम:
< डिव कक्षा = 'सेंटर डिव div1 स्टाइल' पहचान = 'div1' > 1< डिव कक्षा = 'डिव div2 स्टाइल' पहचान = 'div2' > दो
< डिव कक्षा = 'डिव div3 स्टाइल' पहचान = 'div3' > 3
डिव >
डिव >
डिव >
CSS स्टाइलिंग का उपयोग करके तत्वों को स्टाइल करें। ऐसा करने के लिए, एक CSS वर्ग बनाएँ ” .div ” सभी div तत्वों के लिए:
. डिव {गद्दी : 10 पीएक्स ;
कद : 100 पीएक्स ;
चौड़ाई : 100 पीएक्स ;
अंतर : 10 पीएक्स ;
}
बनाओ ' ।केंद्र पृष्ठ के केंद्र में तत्वों को सेट करने के लिए वर्ग:
. केंद्र {अंतर : ऑटो ;
}
अब, स्टाइलिंग के लिए, प्रत्येक div व्यक्तिगत रूप से उनके लिए एक CSS क्लास बनाता है। पहले डिव के लिए, पृष्ठभूमि का रंग सेट करें ' लाल ' में ' div1 Style ' कक्षा:
. div1 Style{
पार्श्वभूमि - रंग : लाल ;
}
दूसरे डिव के लिए, पृष्ठभूमि का रंग सेट करें ' मूली गुलाबी ' का उपयोग ' आरजीबीए (194, 54, 77) 'में कोड' div2Style ' कक्षा:
. div2Style{
पार्श्वभूमि - रंग : rgb ( 194 , 54 , 77 ) ;
}
पृष्ठभूमि का रंग सेट करें ' गुलाबी तीसरे डिव का '' बनाकर div3Style ' कक्षा:
. div3Style{
पार्श्वभूमि - रंग : गुलाबी ;
}
उपरोक्त HTML कोड को चलाने के बाद, आउटपुट इस तरह दिखेगा:
अब, एक जावास्क्रिप्ट फ़ाइल में या ' लिखी हुई कहानी ” टैग, नीचे दिए गए कोड का उपयोग यह जांचने के लिए करें कि क्या event.target में कोई विशिष्ट वर्ग है या नहीं:
दस्तावेज़। addEventListener ( 'क्लिक' , फ़ंक्शन हैंडल क्लिक करें ( प्रतिस्पर्धा ) {जहां क्लास = प्रतिस्पर्धा। लक्ष्य . वर्ग सूची . रोकना ( 'केंद्र' ) ;
चेतावनी ( 'इस div में 'केंद्र' वर्ग है:' + hasClass ) ;
} ) ;
उपरोक्त कोड स्निपेट में:
- सबसे पहले, एक ईवेंट श्रोता को एक क्लिक ईवेंट पर संलग्न करें जो DOM पर प्रत्येक क्लिक को हैंडल करेगा।
- फिर, जांचें कि क्या ट्रिगर किए गए ईवेंट में CSS वर्ग है ' केंद्र 'या नहीं' की मदद से क्लासलिस्ट.क्लास () ' तरीका।
उत्पादन
उपरोक्त GIF से पता चलता है कि div1 में ' केंद्र 'वर्ग जैसा कि यह दिखाता है' सच ', जबकि div2 और div3 प्रदर्शित करते हैं' असत्य 'अलर्ट बॉक्स में, जिसका अर्थ है कि उनमें' शामिल नहीं है केंद्र ' कक्षा।
विधि 2: जांच करें कि क्या event.target में मिलान () विधि का उपयोग करके एक विशिष्ट वर्ग है
एक अन्य जावास्क्रिप्ट पूर्वनिर्धारित विधि जिसे ' मैच () ” का उपयोग यह जांचने के लिए किया जा सकता है कि कोई विशिष्ट वर्ग किसी तत्व या घटना से संबंधित है या नहीं। ' कक्षा का नाम ” यह निर्धारित करने के लिए आवश्यक एकमात्र पैरामीटर है कि किसी तत्व या लक्ष्य ईवेंट में एक निश्चित वर्ग शामिल है या नहीं।
वाक्य - विन्यास
नीचे दिए गए सिंटैक्स का उपयोग match() मेथड के लिए किया जाता है:
प्रतिस्पर्धा। लक्ष्य . माचिस ( '।कक्षा का नाम' )उपरोक्त सिंटैक्स में,
- ' घटना लक्ष्य ' एक ट्रिगर घटना है जिसे जांचा जाएगा कि इसमें विशिष्ट वर्ग शामिल है या नहीं।
- ' कक्षा का नाम ” उस CSS वर्ग के नाम को इंगित करता है जो ट्रिगर किए गए ईवेंट का एक भाग है। माचिस () विधि वर्ग के नाम को एक डॉट (.) के साथ लेती है जो 'शब्द को दर्शाता है' कक्षा ”।
प्रतिलाभ की मात्रा
यदि लक्षित घटना में एक वर्ग है, तो यह 'लौटाता है' सच ' वरना, ' असत्य ” लौटा दिया जाता है।
उदाहरण
एक जावास्क्रिप्ट फ़ाइल या एक स्क्रिप्ट टैग में, कोड की नीचे की पंक्तियों का उपयोग यह जांचने के लिए करें कि क्या event.target में एक विशिष्ट वर्ग है या नहीं “का उपयोग करके मैच () ' तरीका:
दस्तावेज़। addEventListener ( 'क्लिक' , फ़ंक्शन हैंडल क्लिक करें ( प्रतिस्पर्धा ) {जहां क्लास = प्रतिस्पर्धा। लक्ष्य . माचिस ( '.div3Style' ) ;
चेतावनी ( 'यह div की कक्षा 'div3Style' वर्ग से मेल खाती है:' + hasClass ) ;
} ) ;
कोड की उपरोक्त पंक्तियों में:
- सबसे पहले, एक ईवेंट श्रोता को एक क्लिक ईवेंट पर संलग्न करें जो DOM पर प्रत्येक क्लिक को हैंडल करेगा।
- फिर, जांचें कि क्या ' div3Style 'सीएसएस वर्ग' का उपयोग करके ट्रिगर किए गए ईवेंट में मौजूद है मैच () ' तरीका।
- यदि यह मौजूद है, तो अलर्ट () 'के साथ एक संदेश दिखाता है' सच ', वरना ' असत्य ”।
उत्पादन
उपरोक्त GIF से पता चलता है कि केवल div3 में ' div3Style 'वर्ग जैसा कि यह दिखाता है' सच ”।
निष्कर्ष
यह निर्धारित करने के लिए कि ट्रिगर किए गए ईवेंट में निर्दिष्ट वर्ग है या नहीं, जावास्क्रिप्ट का उपयोग करें ' रोकना() 'विधि या' मैच () ' तरीका। हालांकि, शामिल () विधि तत्व के वर्ग को निर्धारित करने के लिए उपयोग की जाने वाली सबसे उपयोगी विधियों में से एक है। दोनों विधियाँ लौटती हैं ” सच 'यदि ट्रिगर किए गए ईवेंट में कोई अन्य वर्ग है' असत्य ” लौटा दिया जाता है। इस पोस्ट ने यह निर्धारित करने के तरीकों की व्याख्या की कि क्या event.target में एक विशेष वर्ग है या जावास्क्रिप्ट का उपयोग नहीं कर रहा है।