इवेंट बबलिंग
ईवेंट बबलिंग प्रक्रिया उस तत्व से शुरू होती है जिसने ईवेंट को ट्रिगर किया और फिर पदानुक्रम में युक्त तत्वों तक बबल किया।
संक्षिप्त जानकारी
निम्नलिखित उदाहरण में हमारे पास 3 तत्व हैं div , अवधि और बटन ।
- पदानुक्रम बनाए रखने के लिए हमें उस बटन . की आवश्यकता होती है तत्व को अवधि . के अंदर नेस्ट किया जाना है तत्व, और अवधि div . के अंदर नेस्ट किया जाने वाला तत्व तत्व।
- सभी तत्वों को क्लिक ईवेंट असाइन करें ताकि जब कोई तत्व क्लिक हो जाए, तो एक अलर्ट बॉक्स खुलेगा जिसमें एक सम्मानित संदेश प्रदर्शित होगा जैसा कि उदाहरण में दिखाया गया है।
- कार्यक्रम को निष्पादित करने के बाद, नीचे दिखाया गया चित्र स्क्रीन पर निष्पादित हो जाएगा।
- जब कोई तत्व क्लिक किया जाता है तो स्वचालित रूप से उसके बाहरी तत्व (तत्व युक्त) भी बुलबुले हो जाते हैं और निष्पादित हो जाते हैं।
- उदाहरण के लिए, यदि हम इनर मोस्ट नेस्टेड एलिमेंट (बटन) पर क्लिक करते हैं तो इसके अलर्ट बॉक्स के साथ अन्य एलिमेंट का अलर्ट बॉक्स (स्पैन, डिव) भी एक-एक करके पदानुक्रम का अनुसरण करते हुए खुल जाएगा।
- मान लीजिए, अगर हम span . पर क्लिक करते हैं तत्पश्चात अवधि . का अलर्ट बॉक्स तत्व और इसके युक्त तत्व div होगा एक के बाद एक खोलो।
- 8) एलिमेंट को ट्रिगर करने और फिर पदानुक्रम में मौजूद एलिमेंट तक बुदबुदाने की इस प्रक्रिया को इवेंट बबलिंग कहा जाता है ।
- 9) ट्रिगर और बबल अप तत्वों को क्रियान्वित किया जाएगा।
उदाहरण
Div element स्पैन एलिमेंट <इनपुट प्रकार ="बटन" वैल्यू ="मुझे क्लिक करें" ऑनक्लिक ="अलर्ट ('बटन क्लिक किया गया')">
कोड संपादक में प्रोग्राम को क्रियान्वित करने के बाद निम्न छवि प्रदर्शित होगी
'क्लिक मी' बटन (बटन एलीमेंट) पर क्लिक करने पर निम्न आउटपुट प्रदर्शित होगा।
आउटपुट
उपरोक्त "क्लिक मी" बटन (बटन एलीमेंट) पर क्लिक करने पर निम्न आउटपुट प्रदर्शित होगा
<पूर्व>
उपरोक्त बटन अलर्ट बॉक्स पर ओके पर क्लिक करने पर, हमें निम्नलिखित अलर्ट बॉक्स मिलेगा जिसमें मैसेज स्पैन क्लिक किया गया है। 
ऊपर दिए गए स्पैन अलर्ट बॉक्स पर ओके पर क्लिक करने पर, हमें निम्न अलर्ट बॉक्स मिलेगा जिसमें मैसेज डिव क्लिक किया गया होगा। 