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