जावास्क्रिप्ट के साथ वेबसाइट (माउसओवर पर) पर पृष्ठभूमि का रंग कैसे टॉगल करें

जब आप जावास्क्रिप्ट के mouseover का उपयोग करके अपने माउस को इसके अंदर और बाहर ले जाते हैं, तो किसी वेबसाइट पर पृष्ठभूमि के रंग को टॉगल करना सीखें और mouseout इवेंट.

एचटीएमएल

यहाँ एक साधारण HTML पृष्ठ के लिए कुछ मार्कअप है:

<!DOCTYPE html>
<html>
  <body>
    <h1>Move your move over this page</h1>
  </body>
</html>

आप इस ट्यूटोरियल का अनुसरण करने के लिए कोडपेन जैसे मुफ्त ऑनलाइन टेक्स्ट एडिटर का उपयोग कर सकते हैं।

JavaScript

जब कोई उपयोगकर्ता अपने माउस को वेबसाइट फ्रेम के ऊपर और बाहर घुमाता है, तो आपको वेबसाइट की पृष्ठभूमि का रंग टॉगल करने के लिए:

लक्ष्य <body> तत्व और इसके संदर्भ को एक चर में संग्रहीत करें।
इवेंट श्रोताओं को window पर सेट करें ऑब्जेक्ट जो दो प्रकार के ईवेंट को सुनता है, mouseover , और mouseout
backgroundColor टॉगल करें दो रंग मानों वाली संपत्ति।

बॉडी एलिमेंट का संदर्भ स्टोर करें

सबसे पहले आपको अपनी वेबसाइट के <body> . का रेफरेंस स्टोर करना होगा तत्व, जो एक वेब पेज पर सभी सामग्री को लपेटता है:

const bodyElement = document.querySelector("body")

"माउसओवर पर" ईवेंट सेट करना

अब एक ईवेंट सेट करते हैं जो तब सुनता है जब उपयोगकर्ता अपने माउस को किसी पृष्ठ पर ले जाता है, और फिर एक फ़ंक्शन निष्पादित करता है जो पृष्ठभूमि रंग को फिर से बदलता है। अपनी JavaScript फ़ाइल में निम्न कोड जोड़ें:

const bodyElement = document.querySelector("body")

// New code
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"
})

// New code
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)

जैसा कि आप देख सकते हैं, यह पहले की तरह ही काम करता है।

रिफैक्टेड उपरोक्त कोड थोड़ा साफ है, इस अर्थ में कि यह अनाम (अनाम) कार्यों का उपयोग नहीं करने के सामान्य जावास्क्रिप्ट दिशानिर्देशों का पालन करता है।

यह कोड पुन:प्रयोज्य भी है चूंकि अब आप दो नामांकित . को कॉल कर सकते हैं किसी भी प्रकार के ईवेंट श्रोता से कार्य करता है, जो कई स्थितियों में व्यावहारिक है।

कोड डेमो देखें।

रंग मानों के लिए आप या तो वास्तविक नामों का उपयोग कर सकते हैं (जैसे "लाल"), हेक्स या आरजीबीए मान।