लेखचर्चा : जावास्क्रिप्ट इवेंट्स 📜

परिचय

• चाय और कोड सीरीज का एक और वीडियो
• विषय: जावास्क्रिप्ट इवेंट्स
• उद्देश्य: जावास्क्रिप्ट के इवेंट्स को प्रोफेशनल प्रोडक्शन लेवल पर समझाना
• उद्देश्य: इंटरव्यू क्रैक करने की तैयारी

जावास्क्रिप्ट इवेंट्स

• DOM पर आधारित हेरफेर
• नए एलिमेंट्स का सृजन और हटाना
• इवेंट्स में विस्तार से जाना जाएगा
• प्रोजेक्ट्स के माध्यम से पढ़ाई

इवेंट लिस्नर्स

• इवेंट्स सीक्वेंशली रन होते हैं, कुछ एक्सेप्शन हैं
• सिंक्रोनस और एसिंक्रोनस प्रोग्रामिंग में अंतर
• इवेंट्स: यूजर की एक्टिविटीज पर आधारित (क्लिक, कीबोर्ड, माउस मूवमेंट्स, आदि)
• इवेंट लिस्नर्स: उपयोगिता, प्रोपेगेशन एबिलिटी

इवेंट हैंडलिंग की अप्रोच

1. HTML में ऑन-क्लिक प्रोपरटी जोड़ना

   • सिंपल लेकिन स्केलेबिलिटी में दिक्कत

2. जावास्क्रिप्ट में ऑन-क्लिक एड करना

   • ठीक लेकिन फीचर की कमी

3. Event Listeners का उपयोग

   • सबसे अच्छा तरीका, अधिक फीचर्स

इवेंट ऑब्जेक्ट

• इवेंट ऑब्जेक्ट: इवेंट के विवरण और प्रॉपर्टीज़ को एक्सेस करना
• इम्पोर्टेंट प्रॉपर्टीज़:
  • type: इवेंट का प्रकार (mouse, keyboard)
  • timeStamp: इवेंट का समय
  • defaultPrevented: डिफॉल्ट प्रॉपर्टी रद्द करना
  • target: वह एलिमेंट जिसपर इवेंट हुआ
  • currentTarget
  • clientX, clientY
  • altKey, ctrlKey, shiftKey
  • keyCode

इवेंट प्रोपेगेशन

• दो प्रकार
  • बबलिंग: इनर से आउटर एलिमेंट्स तक इवेंट का पहुंचना
  • कैप्चरिंग: आउटर से इनर एलिमेंट्स तक इवेंट का पहुंचना
• इवेंट स्टॉप प्रोपेगेशन: इवेंट को एक लेवल पर ही रोकना
• इवेंट प्रिवेंट डिफॉल्ट: एलिमेंट का डिफॉल्ट बिहेवियर रोकना

छोटा प्रोजेक्ट: इमेज रिमूवल

• टास्क: किसी इमेज पर क्लिक करने पर वह इमेज गायब हो जाए
• इंप्लिमेंटेशन: DOM मेनिपुलेशन और इवेंट हैंडलिंग का उपयोग

// सभी इमेज एलिमेंट पकड़ना
const images = document.querySelectorAll('img');

// सभी इमेज एलिमेंट्स पर क्लिक इवेंट लिस्नर लगाना
images.forEach(image => {
  image.addEventListener('click', event => {
    // पैरंट एलिमेंट हटाना
    const parentElement = event.target.parentNode;
    parentElement.remove();
  });
});

निष्कर्ष

• जावास्क्रिप्ट इवेंट्स का महत्व और उनके प्रैक्टिकल अप्रोच
• इवेंट्स प्रोपेगेशन और प्रिवेंट डिफॉल्ट का महत्व
• इवेंट ऑब्जेक्ट के प्रॉपर्टीज़ और उनके उपयोग

आपके लिए टिप्स

• चैनल को सब्सक्राइब करें, दोस्तों के साथ शेयर करें
• चाय और कोड में उत्साह बनाए रखें, अगले सेशन में मिलते हैं!