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

इवेंट कैप्चर करना

ईवेंट कैप्चरिंग क्या घटना शीर्ष तत्व से लक्ष्य तत्व तक शुरू होती है। यह ईवेंट बबलिंग . के विपरीत है , जो लक्ष्य तत्व से शुरू होकर शीर्ष तत्व तक जाता है।

कोड विस्तार

निम्नलिखित कोड में, बॉडी सेक्शन में तीन डिव एलिमेंट लिए जाते हैं और एक स्टाइल लागू किया जाता है ताकि उन्हें नेस्ट किया जा सके।

• addEventListener . का उपयोग करके प्रत्येक div टैग में एक ईवेंट हैंडलर जोड़ें ()।
• सुनिश्चित करें कि यहां ईवेंट "क्लिक . है "घटना।
• द addEventListener () विधि 3 पैरामीटर स्वीकार करती है।

a) जिस इवेंट को वह एक्सेस करने जा रहा है, वह यहां क्लिक इवेंट है।

b) एक ईवेंट हैंडलर फ़ंक्शन ताकि अलर्ट संदेश प्रदर्शित किया जा सके।

c) तीसरे पैरामीटर को फेज कहा जाता है। इस पैरामीटर में यदि हम सत्य रखते हैं तो ईवेंट कैप्चरिंग सक्षम किया जाएगा। अगर हम गलत रखते हैं तो ईवेंट बबलिंग सक्षम किया जाएगा।

• ईवेंट हैंडलर फ़ंक्शन , जिसका उपयोग अलर्ट बॉक्स प्रदर्शित करने के लिए किया जाता है, getAttribute . का उपयोग करेगा () क्लिक किए गए div तत्व का आईडी मान प्राप्त करने के लिए।
• जब हम सबसे अंदर के सबसे नेस्टेड टैग पर क्लिक करते हैं div3 , चूंकि यहां ईवेंट कैप्चरिंग सक्षम हो गई है, अलर्ट संदेश शीर्ष से प्रारंभ होते हैं div1 लक्ष्य टैग को टैग करें div3 ।
• जब हम div2 . पर क्लिक करते हैं टैग, फिर अलर्ट बॉक्स ऊपर से प्रदर्शित होंगे div1 टैग टू टारगेट टैग div2.

उदाहरण

 
 div1 
 div2 
 div3

उपरोक्त कार्यक्रम को क्रियान्वित करने पर हमें स्क्रीन पर निम्न छवि मिलती है

ऊपर क्लिक करने पर div3 (लक्ष्य तत्व) हमें आउटपुट के रूप में निम्न मिलता है

आउटपुट