जावास्क्रिप्ट में ऑनफोकस इवेंट क्या करता है
Javaskripta Mem Onaphokasa Iventa Kya Karata Hai
वाक्य - विन्यास
तत्व। पर ध्यान केंद्रित = समारोह ( ) { myScript } ;
उपरोक्त सिंटैक्स में:
- तत्व: यह HTML तत्व का प्रतिनिधित्व करता है।
- समारोह(): यह उस फ़ंक्शन को संदर्भित करता है जिसे ईवेंट ट्रिगर पर लागू करने की आवश्यकता होती है।
- माइस्क्रिप्ट: यह 'ऑनफोकस' घटना होने पर विशिष्ट कार्य करने के लिए फ़ंक्शन परिभाषा से मेल खाती है।
जावास्क्रिप्ट में 'ऑनफोकस इवेंट' का उपयोग कैसे करें?
' पर ध्यान केंद्रित ”घटना का जावास्क्रिप्ट में विभिन्न तरीकों से उपयोग किया जा सकता है। यह खंड इसके उपयोग को स्पष्ट करने के लिए विभिन्न सामरिक उदाहरण प्रस्तुत करता है।
उदाहरण 1: ट्रिगर करना ' ऑनफोकस इवेंट ” इनपुट फ़ील्ड पृष्ठभूमि रंग बदलकर
यह उदाहरण ट्रिगर करता है ' पर ध्यान केंद्रित उपयोगकर्ता परिभाषित जावास्क्रिप्ट फ़ंक्शन की सहायता से इनपुट टेक्स्ट फ़ील्ड पृष्ठभूमि रंग बदलकर घटना।
HTML कोड
सबसे पहले, निम्नलिखित HTML कोड का अवलोकन करें:
< एच 2 > पर ध्यान केंद्रित आयोजन जावास्क्रिप्ट में एच 2 >
< पी > फ़ोकस प्राप्त करने के लिए इनपुट फ़ील्ड के अंदर क्लिक करें ( पर ध्यान केंद्रित ) . पी >
नाम : < निवेष का प्रकार = 'मूलपाठ' पहचान = 'डेमो' प्लेसहोल्डर = 'अपना नाम दर्ज करें' पर ध्यान केंद्रित = 'फंक ()' >
उपरोक्त कोड में:
- ' <एच2> ” टैग सबहेडिंग को परिभाषित करता है और “ ” टैग क्रमशः एक पैराग्राफ बनाता है।
- उसके बाद, ' <इनपुट> 'इनपुट टेक्स्ट फ़ील्ड का प्रतिनिधित्व करने वाला टैग लेबल किया गया है' नाम ', सामग्री-प्रकार' के रूप में मूलपाठ ', संबंधित आईडी' के रूप में डेमो ”, और कहा गया प्लेसहोल्डर।
- यह भी ' पर ध्यान केंद्रित 'ईवेंट को' नाम के फ़ंक्शन पर रीडायरेक्ट करने के लिए निर्दिष्ट किया गया है फंक () ”।
जावास्क्रिप्ट कोड
अगला, नीचे दिए गए जावास्क्रिप्ट कोड से गुजरें:
< लिखी हुई कहानी >समारोह func ( ) {
दस्तावेज़। getElementById ( 'डेमो' ) . शैली . पृष्ठभूमि = 'गुलाबी' ;
}
लिखी हुई कहानी >
कोड की उपरोक्त पंक्तियों में:
- एक फ़ंक्शन जिसका नाम ' फंक () ' परिभाषित किया गया।
- फ़ंक्शन परिभाषा में, ' दस्तावेज़.getElementById () 'विधि अनुच्छेद को अपनी आईडी के माध्यम से प्राप्त करती है और लागू करती है' शैली। पृष्ठभूमि ' संपत्ति।
- यह ऐसा है कि इनपुट टेक्स्ट फील्ड का बैकग्राउंड कलर इवेंट यानी 'ऑनफोकस' ट्रिगर पर बदल जाता है।
उत्पादन
आउटपुट पुष्टि करता है कि जब ' पर ध्यान केंद्रित 'ईवेंट ट्रिगर, दिए गए इनपुट फ़ील्ड की पृष्ठभूमि का रंग तदनुसार बदलता है।
उदाहरण 2: ट्रिगर करना ' ऑनफोकस इवेंट ” अलर्ट बॉक्स के माध्यम से
इस उदाहरण में, घटना पर एक अलर्ट बॉक्स प्रदर्शित किया जा सकता है, अर्थात, ' पर ध्यान केंद्रित ' उपयोगकर्ता परिभाषित फ़ंक्शन के माध्यम से ट्रिगर करें।
HTML कोड
सबसे पहले, निम्नलिखित HTML कोड पर एक नज़र डालें:
< एच 2 > पर ध्यान केंद्रित आयोजन जावास्क्रिप्ट में एच 2 >< पी > फ़ोकस प्राप्त करने के लिए इनपुट फ़ील्ड से अंदर क्लिक करें ( पर ध्यान केंद्रित ) . पी >
नाम : < निवेष का प्रकार = 'मूलपाठ' पहचान = 'पास1' प्लेसहोल्डर = 'अपना नाम दर्ज करें' >
उपरोक्त HTML कोड ब्लॉक में:
- इसी तरह, 'के माध्यम से स्तर 2 का उपशीर्षक जोड़ें' <एच2> 'टैग करें और' का उपयोग करके एक पैराग्राफ शामिल करें ' उपनाम।
- इसी तरह, एक इनपुट फ़ील्ड को क्रमशः बताए गए लेबल, सामग्री प्रकार, आईडी और प्लेसहोल्डर के माध्यम से परिभाषित किया गया है।
जावास्क्रिप्ट कोड
अब, निम्नलिखित जावास्क्रिप्ट कोड पर विचार करें:
< लिखी हुई कहानी >दस्तावेज़। getElementById ( 'पास1' ) . पर ध्यान केंद्रित = समारोह ( ) { डेमो ( ) } ;
समारोह डेमो ( ) {
चेतावनी ( 'इनपुट क्षेत्र केंद्रित हो जाओ।' ) ;
}
लिखी हुई कहानी >
उपरोक्त कोड स्निपेट में:
- ' दस्तावेज़.getElementById () 'विधि इनपुट फ़ील्ड को उसकी आईडी के माध्यम से प्राप्त करती है और ईवेंट को संबद्ध करती है, अर्थात,' पर ध्यान केंद्रित ' इसके साथ।
- यह ऐसा है कि जावास्क्रिप्ट फ़ंक्शन ' डेमो () 'इवेंट ट्रिगर पर लागू हो जाता है और' प्रदर्शित करता है चेतावनी ” बताए गए संदेश के साथ बॉक्स।
उत्पादन
इस आउटपुट में, यह देखा जा सकता है कि जब माउस इनपुट फ़ील्ड के अंदर क्लिक करता है, तो तत्व केंद्रित हो जाता है और इसलिए 'अलर्ट' बॉक्स बताए गए संदेश को प्रदर्शित करता है।
निष्कर्ष
जावास्क्रिप्ट प्रदान करता है ' पर ध्यान केंद्रित ”घटना जो ट्रिगर हो जाती है जब संबंधित HTML तत्व इसके अंदर चला जाता है यानी फोकस हो जाता है। यह 'का विलोम है' धब्बे पर ” घटना जो तब ट्रिगर होती है जब तत्व फोकस खो देता है। ट्रिगर होने पर वांछित कार्य करने के लिए इसका उपयोग जावास्क्रिप्ट फ़ंक्शन को लागू करने के लिए किया जा सकता है। इस गाइड ने जावास्क्रिप्ट में 'ऑनफोकस' इवेंट के उद्देश्य, कार्य और उपयोग को प्रदर्शित किया।