ईवेंट बबलिंग वह क्रम है जिसमें ईवेंट हैंडलर को तब बुलाया जाता है जब एक तत्व दूसरे तत्व के अंदर नेस्ट किया जाता है, और दोनों तत्वों ने एक ही ईवेंट (उदाहरण के लिए एक क्लिक) के लिए एक श्रोता पंजीकृत किया है। बबलिंग के साथ, ईवेंट को सबसे पहले कैप्चर किया जाता है और अंतरतम तत्व द्वारा नियंत्रित किया जाता है और फिर बाहरी तत्वों के लिए प्रचारित किया जाता है।
कैप्चरिंग के साथ, ईवेंट को सबसे पहले सबसे बाहरी तत्व द्वारा कैप्चर किया जाता है और आंतरिक तत्वों में प्रचारित किया जाता है।
आइए दोनों के उदाहरण देखें।
निम्नलिखित दोनों उदाहरणों के लिए, निम्नलिखित HTML बनाएं -
उदाहरण
<div id='outer' style='background-color:red;display:inline-block;padding:50px;'> Outer Div <div id='inner' style='background-color:yellow;display:inline-block;padding:50px;'> Inner Div </div> </div>
<मजबूत>1. इवेंट बबलिंग
document.querySelector('#outer').addEventListener('click', e => {
console.log('Outer div is clicked');
}, false);
document.querySelector('#inner').addEventListener('click', e => {
console.log('Inner div is clicked');
}, false); यदि आप उपरोक्त कोड चलाते हैं और आंतरिक डिव में क्लिक करते हैं, तो आपको लॉग मिलेगा -
Inner div is clicked Outer div is clicked
<मजबूत>2. इवेंट कैप्चरिंग
document.querySelector('#outer').addEventListener('click', e => {
console.log('Outer div is clicked');
}, true);
document.querySelector('#inner').addEventListener('click', e => {
console.log('Inner div is clicked');
}, true); यदि आप उपरोक्त कोड चलाते हैं और आंतरिक डिव में क्लिक करते हैं, तो आपको लॉग मिलेगा -
Outer div is clicked Inner div is clicked