जावास्क्रिप्ट में घटना प्रवाह प्रक्रिया की व्याख्या करें

जावास्क्रिप्ट में, इवेंट फ्लो प्रक्रिया तीन अवधारणाओं द्वारा पूरी की जाती है -

• ईवेंट लक्ष्य − वास्तविक 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);

यदि आप उपरोक्त कोड चलाते हैं और आंतरिक डिव में क्लिक करते हैं, तो आपको लॉग मिलेगा -

इनर डिव क्लिक किया गया है

बाहरी डिव क्लिक किया जाता है

इवेंट कैप्चर करना

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