आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

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

एक घटना तब हो सकती है जब कोई उपयोगकर्ता HTML तत्व पर क्लिक करता है, पृष्ठ लोड होता है, या जब इनपुट फ़ील्ड का मान बदलता है। आप कोड लिख सकते हैं जो किसी घटना के होने पर HTML संरचना को बदल देता है। अपने कोड में ईवेंट श्रोताओं को जोड़ने के तीन अलग-अलग तरीके सीखें।

1. AddEventListener विधि

AddEventListener विधि लोकप्रिय में से एक है घटना श्रोता के तरीके. इसके तीन पैरामीटर हैं:

  • घटना का प्रतिनिधित्व करने वाली वस्तु।
  • इसे संभालने के लिए एक समारोह।
  • एक वैकल्पिक बूलियन, यूजकैप्चर, जो बताता है कि घटना पूरे डोम में कैसे फैलती है।

घटना लक्ष्य तत्व पर कोई भी निर्दिष्ट DOM घटना हो सकती है। उस घटना के होने पर प्रतिक्रिया देने के लिए एक समारोह स्थापित किया जाता है।

instagram viewer

फ़ंक्शन अनाम या नामित फ़ंक्शन हो सकता है। लोकप्रिय लक्ष्यों में एक तत्व, उसके बच्चे, एक दस्तावेज़ और एक खिड़की शामिल है जो एक घटना का समर्थन करती है।

AddEventListener() जावास्क्रिप्ट में ईवेंट श्रोताओं को प्रशासित करने के लिए एक अनुशंसित तरीका है। यह किसी भी ईवेंट लक्ष्य पर काम करता है, न कि केवल HTML तत्वों पर, और कई ईवेंट हैंडलर्स का समर्थन करता है।

आप डोम पर कुछ कोड निष्पादित करना चाह सकते हैं। जब उपयोगकर्ता बटन पर क्लिक करता है तो आप टेक्स्ट प्रिंट कर सकते हैं, गणना कर सकते हैं या छवि प्रदर्शित कर सकते हैं।

आइए निम्नलिखित कोड के साथ वर्णन करें:

एचटीएमएल>
<एचटीएमएल>
<शरीर>
<एच 1>कार्यों के साथ addEventListener विधिएच 1>
<बटनपहचान="माईबीटीएन">यहाँ क्लिक करेंबटन>
<पीपहचान="डेमो">पी>
शरीर>
एचटीएमएल>

अगला, बटन का उपयोग करके ईवेंट श्रोता जोड़ें।

कॉन्स्ट तत्व = दस्तावेज़.getElementById("माईबीटीएन");
एलिमेंट.ऐडइवेंट लिस्टनर ("क्लिक करें", मायफंक्शन 1);
समारोहmyFunction1() {
दस्तावेज़.getElementById("डेमो".आंतरिक HTML += "फक्शन निष्पादित! "
}

जब आप बटन पर क्लिक करते हैं, तो स्क्रीन पर टेक्स्ट 'फ़ंक्शन एक्ज़ीक्यूटेड' प्रिंट होता है, जैसा कि नीचे दिखाया गया है।

2. AddEventListener को ईवेंट सौंपना

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

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

यहां इवेंट डेलिगेशन का एक उदाहरण दिया गया है:

एचटीएमएल>
<एचटीएमएल>
<शरीर>
<एच 1> बटन पर घटना प्रतिनिधिमंडलएच 1>
<डिव>
<बटन>बटन 1बटन>
<बटन>बटन 2बटन>
<बटन>बटन 3बटन>
डिव>
शरीर>
एचटीएमएल>

अगला, ईवेंट श्रोताओं को कोड की कुछ पंक्तियों के साथ सभी बटनों में जोड़ें।

कॉन्स्ट डिव = दस्तावेज़क्वेरी चयनकर्ता ('डिव')
div.addEventListener ("क्लिक करें", (घटना) => {
अगर (event.target.tagName 'बटन') {
सांत्वना देना।लकड़ी का लट्ठा('बटन क्लिक किया')
 }
});

इवेंट डेलिगेशन इवेंट बबलिंग पर आधारित एक पैटर्न है। इवेंट बबलिंग तब होता है जब कोई तत्व किसी घटना को प्राप्त करता है और इसे DOM में अपने माता-पिता और पूर्वज तत्वों तक पहुंचाता है। यह है एक घटना प्रचार अवधारणा जो जावास्क्रिप्ट में डिफ़ॉल्ट रूप से होती है।

3. ऑनक्लिक विशेषता का उपयोग करना

जब उपयोगकर्ता किसी तत्व पर क्लिक करते हैं तो आप जावास्क्रिप्ट चलाने के लिए ऑनक्लिक विशेषता का उपयोग कर सकते हैं। AddEventListener विधि की तरह, आप पाठ को प्रिंट करने, गणना करने और तत्व सुविधाओं को बदलने के लिए ऑनक्लिक विधि का उपयोग कर सकते हैं डोम.

आप ऑनक्लिक ईवेंट श्रोता को HTML तत्व में इनलाइन ईवेंट हैंडलर के रूप में जोड़ सकते हैं। घटना तब होती है जब उपयोगकर्ता तत्व पर क्लिक करता है। निम्नलिखित पैराग्राफ का रंग गतिशील रूप से ऑनक्लिक विधि से बदलें:

एचटीएमएल>
<एचटीएमएल>
<शरीर>
<एच 1> ऑनक्लिक ईवेंट निष्पादित करेंएच 1>
<पीपहचान="डेमो"क्लिक पर="मायफंक्शन ()">
 मेरे टेक्स्ट का रंग बदलने के लिए मुझे क्लिक करें।
पी>
शरीर>
एचटीएमएल>

JavaScript फ़ाइल में, निम्न कोड जोड़ें:

समारोहmyFunction() {
दस्तावेज़.getElementById("डेमो".style.color = "लाल";
}

आउटपुट दिखाए गए अनुसार दिखाई देगा:

इवेंट श्रोताओं के बारे में क्यों जानें?

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