JavaScript के mouseover और mouseout इवेंट्स का उपयोग करके वेबसाइट पर बैकग्राउंड कलर को टॉगल करना सीखें जब आप अपना माउस इसके अंदर और बाहर ले जाते हैं।
HTML
एक साधारण HTML पेज के लिए यहां कुछ मार्कअप है:
<!DOCTYPE html>
<html>
<body>
<h1>Move your move over this page</h1>
</body>
</html>आप इस ट्यूटोरियल को फॉलो करने के लिए CodePen जैसे फ्री ऑनलाइन टेक्स्ट एडिटर का उपयोग कर सकते हैं।
JavaScript
जब यूजर अपना माउस पेज पर और वेबसाइट फ्रेम के बाहर ले जाता है तो वेबसाइट बैकग्राउंड कलर को टॉगल करने के लिए आपको:
<body>एलिमेंट को टार्गेट करें और इसके रेफरेंस को एक वेरिएबल में स्टोर करें।windowऑब्जेक्ट पर इवेंट लिसनर्स सेट करें जो दो इवेंट टाइप्स के लिए सुनते हैं,mouseover, औरmouseout- दो कलर वैल्यूज़ के साथ
backgroundColorप्रॉपर्टी को टॉगल करें।
बॉडी एलिमेंट का रेफरेंस स्टोर करें
सबसे पहले आपको अपनी वेबसाइट के <body> एलिमेंट का रेफरेंस स्टोर करने की आवश्यकता है, जो वेब पेज पर सभी कंटेंट को लपेटता है:
const bodyElement = document.querySelector("body")"ऑन माउसओवर" इवेंट सेट करना
अब आइए एक इवेंट सेट करें जो सुने जब यूजर पेज पर अपना माउस ले जाता है, और फिर एक फंक्शन एक्सीक्यूट करें जो बैकग्राउंड कलर को लाल में बदल देता है। अपने JavaScript फाइल में निम्नलिखित कोड जोड़ें:
const bodyElement = document.querySelector("body")
// नया कोड
window.addEventListener("mouseover", function() {
bodyElement.style.backgroundColor = "red"
})बढ़िया, यह काम करता है!
"ऑन माउसआउट" इवेंट सेट करना
तो जब यूजर अपना माउस फिर से वेबसाइट फ्रेम के बाहर ले जाता है तो बैकग्राउंड कलर को वापस डिफ़ॉल्ट व्हाइट में कैसे बदलें?
आप ऊपर से विंडो इवेंट को कॉपी कर सकते हैं, और mouseover को mouseout से बदल सकते हैं, और backgroundColor को "white" से बदल सकते हैं।
तब आपका कोड ऐसा दिखेगा:
const bodyElement = document.querySelector("body")
window.addEventListener("mouseover", function() {
bodyElement.style.backgroundColor = "red"
})
// नया कोड
window.addEventListener("mouseover", function() {
bodyElement.style.backgroundColor = "white"
})यह काम करता है!
लेकिन क्या यह इस समस्या को हल करने का सबसे अच्छा तरीका है?
खैर, दुर्भाग्य से, हम एक सिंगल इवेंट लिसनर में कई इवेंट्स नहीं जोड़ सकते (jQuery के विपरीत), जो कोड को कम रिडंडेंट बना देगा।
हालांकि, हम इसके बजाय दो नामित फंक्शन्स सेट कर सकते हैं और प्रत्येक को विंडो इवेंट लिसनर में पास कर सकते हैं, जैसे:
const bodyElement = document.querySelector("body")
function mouseOver() {
bodyElement.style.backgroundColor = "red"
}
function mouseOut() {
bodyElement.style.backgroundColor = "white"
}
window.addEventListener("mouseover", mouseOver)
window.addEventListener("mouseout", mouseOut)जैसा कि आप देख सकते हैं, यह पहले की तरह ही काम करता है।
ऊपर का रीफैक्टर किया गया कोड थोड़ा क्लीनर है, इस अर्थ में कि यह अनाम (नामहीन) फंक्शन्स का उपयोग न करने के सामान्य JavaScript दिशानिर्देशों का पालन करता है।
यह कोड पुन: प्रयोज्य भी है क्योंकि अब आप दोनों नामित फंक्शन्स को किसी भी प्रकार के इवेंट लिसनर से कॉल कर सकते हैं, जो कई स्थितियों में व्यावहारिक है।
कोड डेमो देखें।
कलर वैल्यूज़ के लिए आप या तो वास्तविक नामों (जैसे "red"), हेक्स या rgba वैल्यूज़ का उपयोग कर सकते हैं।
