DOM इवेंट एक वेबपेज को इंटरैक्टिव बनाता है। DOM ईवेंट का उपयोग करने से पेज पर क्लिक होता है या फ़ॉर्म सबमिट होता है, यह डेवलपर्स को एक आकर्षक उपयोगकर्ता अनुभव बनाने देता है।

DOM ईवेंट के कुछ उदाहरण तब होते हैं जब कोई उपयोगकर्ता माउस पर क्लिक करता है, जब कोई वेबपेज लोड होता है, जब कोई छवि लोड होती है, जब कोई HTML फॉर्म सबमिट किया जाता है, और जब कोई उपयोगकर्ता एक कुंजी दबाता है।

इस लेख में हम DOM इवेंट्स में प्रमुख अवधारणाओं को सरल बनाएंगे और पता लगाएंगे कि उन्हें कैसे संभालना है।

1. addEventListener

addEventListener, तत्वों के साथ एक ईवेंट हैंडलर जोड़ता है, यह आपको यह परिभाषित करने की अनुमति देता है कि तत्व पृष्ठ पर उपयोगकर्ताओं के इंटरैक्शन पर कैसे प्रतिक्रिया करता है।

उदाहरण: छवि क्लिक होने पर कॉकटेल विवरण प्रदर्शित करने के लिए नीचे दिया गया कोड एक 'क्लिक' ईवेंट जोड़ रहा है।

`img.addEventListener('click', () => handleClick(cocktail));`

2. क्वेरी चयनकर्ता

querySelector, आपको सीएसएस-जैसे चयनकर्ताओं का उपयोग करके एक तत्व का चयन करने की अनुमति देता है। यह तत्वों को लक्षित करने के सबसे बहुमुखी तरीकों में से एक है।

उदाहरण: यह कोड वेबपेज पर एक संक्षिप्त करने योग्य अनुभाग बना रहा है। document.querySelectorAll वेबपेज पर सभी h3 तत्वों का चयन कर रहा है और सभी मिलान तत्वों की एक नोडलिस्ट लौटाता है।

const setupCollapsibles = () => {
  const collapsibles = document.querySelectorAll('.collapsible h3');

3. getElementById और getElementsByClassName

getElementById अपनी विशिष्ट आईडी द्वारा एकल तत्व को लक्षित करता है।

इसी तरह, getElementsByClassName एक विशिष्ट वर्ग के साथ सभी तत्वों का चयन करता है और उन्हें एक संग्रह के रूप में लौटाता है।

उदाहरण: नीचे, getElementById HTML दस्तावेज़ में अपनी आईडी विशेषता द्वारा एक तत्व ढूंढता है।

इसका उपयोग यहां विशिष्ट फॉर्म इनपुट, नए-नाम, नई-सामग्री, नई-छवि, नई-नुस्खा तक पहुंचने और उनके मूल्यों को पुनर्प्राप्त करने के लिए किया जा रहा है।

इन मानों को फिर न्यूकॉकटेल ऑब्जेक्ट के गुणों में संग्रहीत किया जाता है जिसे कॉन्स्ट के साथ परिभाषित किया जाता है।

इस तरह, जब उपयोगकर्ता एक नया कॉकटेल बनाने के लिए एक फॉर्म सबमिट करता है तो इसे न्यूकॉकटेल ऑब्जेक्ट के अंदर एक संरचित तरीके से संग्रहीत किया जाता है।

const newCocktail = {
      name: document.getElementById('new-name').value,
      ingredients: document.getElementById('new-ingredients').value.split(', '),
      image: document.getElementById('new-image').value,
      recipe: document.getElementById('new-recipe').value,
    }; 

4. DOMContentLoaded

DOMContentLoaded इवेंट यह सुनिश्चित करता है कि आपका जावास्क्रिप्ट DOM पूरी तरह से लोड होने के बाद ही चलता है, जिससे तत्वों के उपलब्ध होने से पहले उन तक पहुंचने की कोशिश में त्रुटियों को रोका जा सके।

उदाहरण: DOMContentLoaded, एक ऐसी घटना है जो तब सक्रिय होती है जब प्रारंभिक HTML दस्तावेज़ पूरी तरह से लोड और पार्स किया जाता है, स्टाइलशीट, छवियों या अन्य बाहरी संसाधनों के पूरी तरह से लोड होने की प्रतीक्षा किए बिना।

यह सुनिश्चित करता है कि DOM पूरी तरह से निर्मित और सुलभ है, ताकि आप HTML में तत्वों के साथ सुरक्षित रूप से बातचीत कर सकें, जैसे कि ईवेंट श्रोताओं को जोड़ना या DOM में हेरफेर करना।

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

document.addEventListener('DOMContentLoaded', () => {
  setupEditListener();
  setupDeleteListener();
});

अंतिम नोट्स

किसी वेबपेज को उपयोगकर्ताओं के लिए इंटरैक्टिव और आकर्षक बनाने में DOM इवेंट मौलिक हैं। AddEventListener, querySelector, getElementById, और getElementsByClassName जैसी मुख्य विधियों को समझकर और उनका उपयोग करके, आप गतिशील उपयोगकर्ता इंटरफ़ेस बना सकते हैं जो क्लिक, फ़ॉर्म सबमिशन और बहुत कुछ का जवाब देते हैं।

इसके अतिरिक्त, DOMContentLoaded इवेंट यह सुनिश्चित करता है कि आपकी स्क्रिप्ट DOM पूरी तरह से लोड होने के बाद ही निष्पादित की जाती है, संभावित त्रुटियों को रोकती है और सुचारू उपयोगकर्ता इंटरैक्शन सुनिश्चित करती है।

संक्षेप में, DOM ईवेंट आपको इसकी अनुमति देते हैं:

• उत्तरदायी अन्तरक्रियाशीलता के लिए addEventListener के साथ ईवेंट हैंडलर संलग्न करें।

• सामग्री को गतिशील रूप से अपडेट करने के लिए querySelector या getElementById वाले तत्वों का चयन करें।

• उपयोगकर्ता इनपुट के आधार पर इवेंट-ट्रिगर गतिविधियों को प्रबंधित करें, जैसे कि फॉर्म सबमिशन।

• सुनिश्चित करें कि DOMContentLoaded का उपयोग करके आपकी स्क्रिप्ट सही समय पर चलें।

इन तकनीकों के साथ, आप स्थिर वेब पेजों को इंटरैक्टिव अनुभवों में बदल सकते हैं जो उपयोगकर्ता जुड़ाव को बढ़ाते हैं।