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