जावास्क्रिप्ट में घटना प्रसार को समझना

जावास्क्रिप्ट में घटनाएँ सूचनाओं की तरह काम करती हैं जो एक उपयोगकर्ता बातचीत, या अन्य कार्रवाई हुई है। उदाहरण के लिए, जब आप किसी प्रपत्र बटन पर क्लिक करते हैं, तो आपका ब्राउज़र यह इंगित करने के लिए एक ईवेंट उत्पन्न करता है कि यह हो गया है। खोज बॉक्स में टाइप करने से ईवेंट भी बढ़ जाते हैं और इस तरह से ऑटो-सुझाव अक्सर ऑनलाइन काम करता है।

जावास्क्रिप्ट में, ऐसी घटनाएं जिनमें उपयोगकर्ता इंटरैक्शन शामिल होता है, आमतौर पर विशिष्ट तत्वों के खिलाफ आग लगती है। उदाहरण के लिए, किसी बटन पर क्लिक करने से उस बटन के सामने एक ईवेंट उत्पन्न हो जाता है। लेकिन घटनाएं भी फैलती हैं: वे दस्तावेज़ पदानुक्रम में अन्य तत्वों के खिलाफ आग लगाते हैं।

घटना प्रसार और उपलब्ध दो अलग-अलग प्रकारों के बारे में जानने के लिए आगे पढ़ें।

जावास्क्रिप्ट में इवेंट हैंडलिंग क्या है?

वेब पेज द्वारा उठाए जाने वाले ईवेंट को पकड़ने और उनका जवाब देने के लिए आप जावास्क्रिप्ट कोड का उपयोग कर सकते हैं। आप डिफ़ॉल्ट व्यवहार को ओवरराइड करने या कोई डिफ़ॉल्ट मौजूद न होने पर कार्रवाई करने के लिए ऐसा कर सकते हैं। एक सामान्य उदाहरण प्रपत्र सत्यापन है। इवेंट हैंडलिंग आपको फॉर्म जमा करने की सामान्य प्रक्रिया को बाधित करने की अनुमति देता है।

इस उदाहरण पर विचार करें:

मुझे क्लिक करें

उपरोक्त कोड में बटन नामक आईडी वाला बटन तत्व है। इसमें एक क्लिक इवेंट श्रोता है जो संदेश के साथ अलर्ट प्रदर्शित करता है नमस्ते दुनिया.

घटना प्रसार क्या है?

घटना प्रसार उस क्रम का वर्णन करता है जिसमें घटनाएँ यात्रा करती हैं डोम पेड़ जब वेब ब्राउज़र उन्हें सक्रिय करता है।

मान लें कि एक div टैग के अंदर एक फॉर्म टैग है, और दोनों में ऑनक्लिक ईवेंट श्रोता हैं। ईवेंट प्रचार वर्णन करता है कि कैसे एक ईवेंट श्रोता दूसरे के बाद सक्रिय हो सकता है।

दो प्रकार के प्रसार हैं:

1. ईवेंट बबलिंग, जिसके द्वारा ईवेंट बच्चे से लेकर माता-पिता तक ऊपर की ओर बुलबुला बनाते हैं।
2. ईवेंट कैप्चरिंग, जिसके द्वारा ईवेंट माता-पिता से बच्चे तक नीचे की ओर जाते हैं।

जावास्क्रिप्ट में इवेंट बबलिंग क्या है?

इवेंट बबलिंग का मतलब है कि इवेंट के प्रचार की दिशा चाइल्ड एलिमेंट से उसके पैरेंट एलिमेंट तक होगी।

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

डिफ़ॉल्ट रूप से, जिस क्रम में वेब ब्राउज़र अलर्ट प्रदर्शित करता है वह बटन, फॉर्म, फिर डिव होगा। घटनाएँ बच्चे से लेकर माता-पिता तक होती हैं।

 डिव


 प्रपत्र 



 बटन

इवेंट कैप्चरिंग क्या है?

ईवेंट कैप्चरिंग के साथ, प्रसार का क्रम बबलिंग के विपरीत होता है। अन्यथा, अवधारणा समान है। कैप्चरिंग के साथ एकमात्र अंतर यह है कि घटनाएं माता-पिता से बच्चे तक होती हैं। पिछले उदाहरण के विपरीत, ईवेंट कैप्चरिंग के साथ, ब्राउज़र इस क्रम में अलर्ट प्रदर्शित करेगा: डिव, फॉर्म और बटन।

ईवेंट कैप्चरिंग प्राप्त करने के लिए, आपको कोड में केवल एक परिवर्तन करने की आवश्यकता है। का दूसरा पैरामीटर एडवेन्ट लिस्टनर () प्रसार के प्रकार को परिभाषित करता है। बबलिंग का प्रतिनिधित्व करने के लिए यह डिफ़ॉल्ट रूप से गलत है। ईवेंट कैप्चरिंग सक्षम करने के लिए, आपको दूसरे पैरामीटर को सही पर सेट करना होगा।

 div.addEventListener ("क्लिक करें", () => {
 चेतावनी ("डिव")
 }, सच);
 form.addEventListener ("क्लिक करें", () => {
 चेतावनी ("फॉर्म")
 }, सच);
 button.addEventListener ("क्लिक करें", () => {
 चेतावनी ("बटन")
 }, सच);

आप घटना के प्रसार को कैसे रोक सकते हैं?

आप का उपयोग करके घटनाओं के प्रसार को रोक सकते हैं स्टॉपप्रॉपैगेशन () तरीका। एडवेन्ट लिस्टनर () विधि एक ईवेंट नाम और एक हैंडलर फ़ंक्शन स्वीकार करती है। हैंडलर एक ईवेंट ऑब्जेक्ट को इसके पैरामीटर के रूप में लेता है। यह वस्तु घटना के बारे में सारी जानकारी रखती है।

जब आप का आह्वान करते हैं स्टॉपप्रॉपैगेशन () विधि, घटना उस बिंदु से प्रचार करना बंद कर देगी। उदाहरण के लिए, जब आप उपयोग करते हैं स्टॉपप्रॉपैगेशन () प्रपत्र तत्व पर, ईवेंट डिव तक बुदबुदाना बंद कर देंगे। यदि आप बटन पर क्लिक करते हैं, तो आप बटन और फॉर्म पर उठाए गए ईवेंट देखेंगे, लेकिन div नहीं।

form.addEventListener ("क्लिक करें", (ई) => {
ई.स्टॉपप्रोपेगेशन ();
 चेतावनी ("फॉर्म");
});

सम्बंधित: अल्टीमेट जावास्क्रिप्ट चीट शीट

जावास्क्रिप्ट में हुड के नीचे बहुत शक्ति है

जावास्क्रिप्ट की घटना प्रबंधन शक्तिशाली है, जो कई पूर्ण विकसित इंटरफ़ेस भाषाओं के तुलनीय है। जब आप इंटरैक्टिव वेब एप्लिकेशन विकसित कर रहे हों, तो यह आपके टूलबॉक्स का एक महत्वपूर्ण हिस्सा होता है। लेकिन समझने के लिए कई अन्य उन्नत विषय हैं। पेशेवर जावास्क्रिप्ट डेवलपर्स के लिए, सीखने के लिए बहुत कुछ है!

यदि आप एक पेशेवर की तरह जावास्क्रिप्ट को कोड करना सीखना चाहते हैं तो चतुर-एक लाइनर्स के लिए हमारी मार्गदर्शिका देखें और अपने अगले साक्षात्कार में वाह-वाह करने की तैयारी करें।

11 जावास्क्रिप्ट वन-लाइनर्स आपको पता होना चाहिए

जावास्क्रिप्ट वन-लाइनर्स की इस विस्तृत श्रृंखला का उपयोग करके बस एक छोटे से कोड के साथ बहुत कुछ हासिल करें।

आगे पढ़िए

लेखक के बारे में