इवेंट बबलिंग वह क्रम है जिसमें इवेंट हैंडलर्स कॉल किए जाते हैं जब एक एलिमेंट दूसरे एलिमेंट के अंदर नेस्टेड होता है, और दोनों एलिमेंट्स ने उसी इवेंट (उदाहरण के लिए क्लिक) के लिए लिसनर रजिस्टर किया होता है। बबलिंग के साथ, इवेंट पहले इनरमोस्ट एलिमेंट द्वारा कैप्चर और हैंडल किया जाता है और फिर आउटर एलिमेंट्स तक प्रचारित होता है।
कैप्चरिंग के साथ, इवेंट पहले आउटरमोस्ट एलिमेंट द्वारा कैप्चर किया जाता है और इनर एलिमेंट्स तक प्रचारित होता है।
आइए दोनों के उदाहरण देखते हैं।
निम्नलिखित दोनों उदाहरणों के लिए, निम्न 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
