जावास्क्रिप्ट में ईवेंट बबलिंग
कल्पना कीजिए कि आपके पास कई ब्लॉक हैं जो एक दूसरे के अंदर नेस्टेड हैं:
<div id="elem1">
<div id="elem2">
<div id="elem3"></div>
</div>
</div>
हमारे डिव्स के रेफरेंस वेरिएबल में प्राप्त करते हैं:
let elem1 = document.querySelector('#elem1');
let elem2 = document.querySelector('#elem2');
let elem3 = document.querySelector('#elem3');
और अब उन पर क्लिक हैंडलर लगाते हैं:
elem1.addEventListener('click', function() {
alert('हरा');
});
elem2.addEventListener('click', function() {
alert('नीला');
});
elem3.addEventListener('click', function() {
alert('लाल');
});
हमारे ब्लॉक्स को कुछ CSS जोड़कर स्क्रीन पर प्रदर्शित करते हैं:
अब सबसे भीतरी लाल ब्लॉक पर क्लिक करें - और आप देखेंगे कि कैसे घटना पहले लाल ब्लॉक में ट्रिगर होती है, फिर नीले में, फिर हरे में। और यह तार्किक है, क्योंकि आंतरिक ब्लॉक पर क्लिक करते समय, आप एक साथ सभी बाहरी ब्लॉक्स पर भी क्लिक कर रहे होते हैं।
यानी ऐसा होता है कि जब आप सबसे भीतरी ब्लॉक पर क्लिक करते हैं, तो क्लिक इवेंट पहले उसमें उत्पन्न होता है, फिर उसके पैरेंट में ट्रिगर होता है, उसके पैरेंट के पैरेंट में और इसी तरह आगे बढ़ता है जब तक कि सबसे ऊपर तक नहीं पहुंच जाता।
इस व्यवहार को घटना बबलिंग (bubbling) कहा जाता है - हवा के बुलबुले के सतह पर उठने की तरह। ठीक उसी तरह, हमारी घटना ऊपर की ओर उठती हुई प्रतीत होती है, हर बार उच्चतर ब्लॉक्स पर ट्रिगर होती है।
स्वयं वह कोड लिखें जो घटना बबलिंग प्रदर्शित करेगा। इस पर विभिन्न प्रकार की घटनाओं के बबलिंग की जाँच करें।
सभी घटनाएं बबल नहीं करती हैं। प्रयोगात्मक रूप से कम से कम एक ऐसी घटना खोजें जो बबल नहीं करेगी।
