विभिन्न घटनाओं के लिए ब्राउज़र के डिफ़ॉल्ट इंटरैक्शन और व्यवहार होते हैं।
उदाहरण के लिए, जब कोई उपयोगकर्ता फॉर्म पर "सबमिट" बटन पर क्लिक करता है, तो फॉर्म डिफ़ॉल्ट रूप से एक URL पर सबमिट हो जाता है।
जब किसी एलिमेंट के चाइल्ड पर क्लिक किया जाता है, तो क्लिक इवेंट उस एलिमेंट पर भी होता है क्योंकि यह मुख्य कंटेनर है।
कुछ मामलों में, आप इन डिफ़ॉल्ट को ओवरराइड करना चाह सकते हैं। इस लेख में, हम सीखेंगे कि event.preventDefault() और event.stopPropagation() मेथड क्या हैं और ब्राउज़र में होने वाली कुछ डिफ़ॉल्ट कार्रवाइयों को रद्द करने के लिए उनका उपयोग कैसे करें।
event.preventDefault()
यह मेथड उन डिफ़ॉल्ट कार्रवाइयों को रोकता है जो ब्राउज़र इवेंट ट्रिगर होने पर करता है।
यहां वेबपेज पर डिफ़ॉल्ट कार्रवाइयों के कुछ उदाहरण हैं और event.preventDefault() के साथ उन्हें कैसे ओवरराइड करें।
डिफ़ॉल्ट फॉर्म सबमिशन को कैसे ओवरराइड करें
जब कोई उपयोगकर्ता फॉर्म सबमिट करता है (सबमिट बटन क्लिक किया जाता है), तो फॉर्म की डिफ़ॉल्ट कार्रवाई फॉर्म के डेटा को एक URL पर सबमिट करना है जो डेटा को प्रोसेस करता है।
फॉर्म एलिमेंट्स में action और method एट्रिब्यूट्स होते हैं जो फॉर्म को सबमिट करने के लिए URL और रिक्वेस्ट के प्रकार (get, post, आदि) को निर्दिष्ट करते हैं।
यदि ये एट्रिब्यूट्स प्रदान नहीं किए जाते हैं, तो डिफ़ॉल्ट URL वह वर्तमान URL है जिस पर फॉर्म सबमिट किया गया था, और मेथड get है।
उदाहरण के लिए, यह कोड:
<form> <input name="email" /> <input name="password" /> <input type="submit" /> </form> यह पेज उत्पन्न करता है:
"dillion" और "password" इनपुट के साथ फॉर्म सबमिट करने पर, आप 127.0.0.1:5500/index.html पर सबमिट एक get रिक्वेस्ट देख सकते हैं जैसे:
यह क्रिया ब्राउज़र द्वारा डिफ़ॉल्ट रूप से फॉर्म को संभालने का तरीका है।
लेकिन आप डेटा के साथ अनुरोध भेजने से पहले और अधिक चीजें करना चाह सकते हैं। यह आज के फॉर्म को संभालने के दृष्टिकोण में विशेष रूप से आम है।
आप डेटा वैलिडेशन, डेटा जांच, प्रोसेसिंग, हेडर्स कॉन्फिगर करना, और इसी तरह कुछ करना चाह सकते हैं अनुरोध को URL पर भेजने से पहले।
इन परिदृश्यों में, आप फॉर्म की डिफ़ॉल्ट कार्रवाई को रोकना चाहेंगे। यहां कैसे:
<form id='form'> ... </form> const form = document.getElementById('form') form.addEventListener('submit', (event) => { event.preventDefault() // डेटा प्रोसेस करें और मैन्युअली रिक्वेस्ट सबमिट करें }) इस तरह, फॉर्म सबमिट करना आपके हाथ में है।
लिंक पर क्लिक करते समय डिफ़ॉल्ट कार्रवाई को कैसे ओवरराइड करें
जब आप एक लिंक पर क्लिक करते हैं (एक एंकर टैग a जिसमें href एट्रिब्यूट होता है), तो डिफ़ॉल्ट कार्रवाई क्लिक किए गए लिंक पर ब्राउज़र में नेविगेशन है।
क्या होगा यदि आप उस कार्रवाई को इंटरसेप्ट करना चाहते हैं और शायद नेविगेशन से पहले कुछ करें? उदाहरण के लिए, यह जांचना कि उपयोगकर्ता के पास उस पेज तक पहुंच है जिस पर वे नेविगेट करना चाहते हैं। यहां आप ऐसा कैसे करेंगे:
<a id="link" href="https://google.com">Google</a> const link = document.getElementById("link") link.addEventListener("click", event => { event.preventDefault() // कुछ करें और नेविगेट करें }) आप इसे आज़मा सकते हैं। जब आप "Google" लिंक पर क्लिक करते हैं, तो कोई नेविगेशन नहीं होता – क्योंकि आपने डिफ़ॉल्ट नेविगेशन कार्रवाई को रोक दिया है। अब, आपको नेविगेशन को स्वयं संभालना होगा।
event.stopPropagation()
प्रोपेगेशन किसी चीज़ को फैलाने का कार्य है, इस मामले में, इवेंट्स। stopPropagation मेथड का उपयोग इवेंट ट्रिगर होने पर एलिमेंट पर इवेंट्स के फैलाव को रोकने के लिए किया जाता है।
JavaScript में, जब आप किसी एलिमेंट पर इवेंट ट्रिगर करते हैं, तो यह पैरेंट्स और पूर्वजों तक ट्री को ऊपर बबल करता है। मूल रूप से, इवेंट वाला एलिमेंट पैरेंट के कंटेनर के "अंदर" होता है, इसलिए पैरेंट को भी इवेंट्स प्राप्त होते हैं।
इसे बेहतर ढंग से समझाने के लिए, मैं एक उदाहरण का उपयोग करूंगा।
किसी एलिमेंट के चाइल्ड पर क्लिक करना
मान लें कि आपके पास निम्न एलिमेंट्स हैं:
<div> <button>Click me</button> </div> जब आप button पर क्लिक करते हैं, तो आप div कंटेनर पर भी क्लिक कर रहे होते हैं क्योंकि बटन कंटेनर में है। इस तर्क का अर्थ है कि क्लिक इवेंट बटन से कंटेनर तक प्रोपेगेट होता है, और इवेंट सभी दादा-दादी तक फैलता रहता है जब तक यह रूट तक नहीं पहुंच जाता।
इसे सत्यापित करने के लिए, मैं इस कोड के साथ समझाऊंगा कि यह कैसे काम करता है:
<div id="div"> <button id="button">Click me</button> </div> const div = document.getElementById('div') const button = document.getElementById('button') button.addEventListener('click', () => { console.log('button clicked') }) div.addEventListener('click', () => { console.log('div container clicked') }) जब आप इसे अपने ब्राउज़र पर चलाने की कोशिश करते हैं और बटन पर क्लिक करते हैं, तो आपको यह परिणाम मिलेगा:
div कंटेनर को भी क्लिक इवेंट प्राप्त होता है, इसलिए क्लिक कॉलबैक फ़ंक्शन भी कहा जाता है।
इवेंट प्रोपेगेशन इवेंट्स और एलिमेंट्स का डिफ़ॉल्ट व्यवहार है, लेकिन कुछ मामलों में, आप कुछ व्यवहार नहीं चाह सकते हैं। कई उदाहरणों में, यहां एक है।
यहां Gmail न्यू मैसेज पॉपअप है:
शीर्ष पर, आपके पास तीन एक्शन बटन हैं। एक पॉपअप को छोटा करता है, एक पॉपअप को फुलस्क्रीन बनाता है, और एक पॉपअप को बंद करता है।
लेकिन शीर्ष बार, "न्यू मैसेज" टेक्स्ट के साथ, इसमें एक क्लिक हैंडलर भी है, ताकि जब इस पर क्लिक किया जाए, तो यह पॉपअप को छोटा कर दे:
यहां आप एक चीज से बचना चाहते हैं, कि किसी भी बटन पर क्लिक करने पर, आप नहीं चाहते कि क्लिक इवेंट शीर्ष बार तक प्रोपेगेट हो और उस इवेंट के लिए फ़ंक्शन भी निष्पादित हो। मेरा मतलब है, क्लोज बटन पर क्लिक करने पर, उदाहरण के लिए, आप नहीं चाहते कि शीर्ष बार भी छोटा हो जाए।
ऐसे मामलों में, आप प्रोपेगेशन को रोकना चाहते हैं।
मान लें कि पॉपअप इस तरह बनाया गया है:
<div id='top-bar'> <!-- The Message Element --> <!-- The Buttons --> </div> const topBar = document.getElementById('top-bar') const closeButton = document.getElementById('close-btn') topBar.addEventListener('click', () => { // पॉपअप को छोटा या बड़ा करें }) closeButton.addEventListener('click', () => { // पॉपअप बंद करें }) आप बटन के लिस्टनर में stopPropagation मेथड भी जोड़ना चाहेंगे, ताकि इवेंट को शीर्ष बार तक फैलने से रोका जा सके। ऐसा करने के लिए, आप बटन के लिस्टनर को अपडेट करेंगे:
closeButton.addEventListener('click', (event) => { event.stopPropagation() // पॉपअप बंद करें }) इसे लागू करने के साथ, शीर्ष बार को केवल तभी क्लिक इवेंट प्राप्त होगा जब उस पर सीधे क्लिक किया जाएगा।
समापन
event.preventDefault() और event.stopPropagation() के बीच अंतर यह है कि पूर्व ब्राउज़र द्वारा की गई डिफ़ॉल्ट कार्रवाइयों को रोकता है, जबकि बाद वाला इवेंट्स के डिफ़ॉल्ट व्यवहार को रोकता है – ट्री तक प्रोपेगेट होना।
ये डिफ़ॉल्ट कार्रवाइयां और व्यवहार गलतियां नहीं हैं, और कोड करते समय आपको उनके बारे में चिंता करने की आवश्यकता नहीं है। लेकिन ऐसे परिदृश्य हैं जहां आप उन्हें ओवरराइड करना चाहते हैं, जैसा कि हमने इस लेख के उदाहरणों में देखा है।
