आओ, 'ऐसे सीखो जैसे तुम 5 साल के हो' सिर्फ एक मुहावरा है - मैं यहां कोई खिलौना कहानी नहीं बता रहा हूं! लेकिन मैं वादा करता हूं, अगर आप शुरू से अंत तक ध्यान से पढ़ेंगे, तो सब कुछ समझ में आ जाएगा।

इवेंट बबलिंग और कैप्चरिंग दो चरण हैं कि कैसे इवेंट जावास्क्रिप्ट में ट्रिगर होने पर डीओएम (डॉक्यूमेंट ऑब्जेक्ट मॉडल) के माध्यम से प्रसारित (या यात्रा) करते हैं। अब, इस कथन के लिए घटना प्रसार की अवधारणा को स्पष्ट करना आवश्यक है।

घटना प्रचार

जब कोई ईवेंट किसी तत्व पर होता है, जैसे div के अंदर एक बटन, तो ईवेंट केवल उस बटन पर नहीं होता है। इवेंट DOM के माध्यम से एक प्रक्रिया में गुजरता है जिसे इवेंट प्रसार के रूप में जाना जाता है। यह प्रक्रिया दो मुख्य चरणों में होती है:

• इवेंट कैप्चरिंग (जिसे "ट्रिकलिंग" भी कहा जाता है)

• इवेंट बबलिंग

अब, मुझे आशा है कि आपको विचार मिल गया होगा। आइए दोनों को उदाहरण से समझते हैं।

इवेंट बबलिंग

इवेंट बबलिंग का मतलब है कि जब किसी तत्व पर कोई घटना घटती है, तो यह पहले उस तत्व के लिए इवेंट हैंडलर को ट्रिगर करता है। फिर, यह अपने मूल तत्वों के ईवेंट हैंडलर को ट्रिगर करने के लिए DOM ट्री में ऊपर की ओर बढ़ता है, और इसी तरह, जब तक कि यह दस्तावेज़ या DOM ट्री की जड़ तक नहीं पहुंच जाता।

  Parent Div
  Click Me!

उदाहरण स्पष्टीकरण: जब आप बटन पर क्लिक करते हैं, तो "बटन क्लिक हुआ!" अलर्ट पहले दिखता है क्योंकि इवेंट बटन पर ट्रिगर होता है। उसके बाद, ईवेंट पैरेंट डिव तक "बबल" हो जाता है, और आप "पेरेंट डिव क्लिक्ड!" देखते हैं। चेतावनी। ऐसा इसलिए है क्योंकि ईवेंट बटन पर शुरू होता है और फिर उसके मूल div तक जाता है। तो, प्रसार की इस प्रक्रिया को 'इवेंट बबलिंग' कहा जाता है।

इवेंट कैप्चरिंग

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

  Parent Div
  Click Me!

इस मामले में, जब आप बटन पर क्लिक करते हैं, तो "पैरेंट डिव क्लिक किया गया!" अलर्ट पहले दिखाई देगा. फिर, "बटन क्लिक हुआ!" अलर्ट दिखाई देगा क्योंकि ईवेंट दस्तावेज़ स्तर से शुरू होता है, पहले पैरेंट डिव तक कैप्चर (ट्रिकल) करता है, और फिर बटन तक पहुंचता है।

addEventListener के तीसरे तर्क का सत्य मान कैप्चरिंग चरण का निर्धारक है।

प्रत्येक घटना 3 चरणों से गुजरती है

स्वाभाविक रूप से, प्रत्येक घटना तीनों चरणों से गुजरती है:

• कैप्चरिंग चरण: घटना शीर्ष (दस्तावेज़) से शुरू होती है और लक्ष्य तक नीचे जाती है।

• लक्ष्य चरण: ईवेंट उस तत्व तक पहुंचता है जिसके साथ आपने इंटरैक्ट किया था (लक्ष्य)।

• बुलबुला चरण: लक्ष्य तक पहुंचने के बाद, घटना मूल तत्वों के माध्यम से वापस बुदबुदाती है।

तो हां, एक घटना स्वाभाविक रूप से सभी तीन चरणों से गुजरती है, लेकिन जावास्क्रिप्ट आपको नियंत्रण देता है कि आपका इवेंट श्रोता किस चरण में कार्य करेगा।

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

जब आप तीसरे तर्क के रूप में सत्य पास करते हैं, तो आप जावास्क्रिप्ट को कैप्चरिंग चरण के दौरान घटना को सुनने के लिए कहते हैं (जैसा कि यह डीओएम के नीचे यात्रा करता है)। ईवेंट अभी भी सभी चरणों (कैप्चरिंग, लक्ष्य और बबलिंग) से गुजरता है, लेकिन ईवेंट लक्ष्य तत्व तक पहुंचने से पहले, श्रोता को कैप्चरिंग चरण के दौरान ट्रिगर किया जाएगा।

क्या जब आप ट्रू का उपयोग करते हैं तो इवेंट कैप्चरिंग से बबलिंग की ओर चला जाता है? नहीं, घटना हमेशा कैप्चरिंग और बबलिंग दोनों के माध्यम से चलती है। जब आप सच हो जाते हैं, तो आप बुलबुले चरण को नहीं रोक रहे हैं। आप श्रोता को केवल कैप्चरिंग के दौरान प्रतिक्रिया देने के लिए कह रहे हैं। इवेंट कैप्चरिंग से लेकर लक्ष्य तक और फिर सामान्य रूप से बबलिंग तक जारी रहेगा।

सारांश:

• सभी घटनाएं स्वाभाविक रूप से कैप्चरिंग, लक्ष्य और बबलिंग चरणों से गुजरती हैं।

• डिफ़ॉल्ट रूप से, ईवेंट श्रोता बबलिंग चरण के दौरान काम करते हैं (ईवेंट लक्ष्य तक पहुंचने और ऊपर की ओर बढ़ने के बाद)।

• जब आप सच हो जाते हैं, तो आप इवेंट श्रोता को कैप्चरिंग चरण के दौरान ट्रिगर करने के लिए कह रहे हैं (जैसे-जैसे इवेंट नीचे की ओर बढ़ता है)।

• घटना अभी भी सभी चरणों (कैप्चरिंग, लक्ष्य और बबलिंग) से गुजरती है, लेकिन आपका श्रोता तय करता है कि किस चरण में कार्य करना है।