विभिन्न घटनाओं के लिए ब्राउज़र में डिफ़ॉल्ट इंटरैक्शन और व्यवहार होते हैं।
उदाहरण के लिए, जब कोई उपयोगकर्ता किसी प्रपत्र पर "सबमिट" बटन पर क्लिक करता है, तो फ़ॉर्म डिफ़ॉल्ट रूप से URL में सबमिट हो जाता है।
जब किसी एलीमेंट के चाइल्ड पर क्लिक किया जाता है, तो एलिमेंट पर भी क्लिक इवेंट होता है क्योंकि यह मुख्य कंटेनर होता है।
कुछ मामलों में, आप इन डिफ़ॉल्ट को ओवरराइड करना चाह सकते हैं। इस लेख में, हम सीखेंगे कि event.preventDefault() और event.stopPropagation() ब्राउज़र में होने वाली कुछ डिफ़ॉल्ट क्रियाओं को रद्द करने के लिए तरीके हैं और उनका उपयोग कैसे करें।
event.preventDefault()
यह विधि किसी ईवेंट के ट्रिगर होने पर ब्राउज़र द्वारा की जाने वाली डिफ़ॉल्ट कार्रवाइयों को रोकती है।
यहां वेबपृष्ठों पर डिफ़ॉल्ट कार्रवाइयों के कुछ उदाहरण दिए गए हैं और उन्हें event.preventDefault() . के साथ ओवरराइड कैसे करें ।
डिफ़ॉल्ट फ़ॉर्म सबमिशन को ओवरराइड कैसे करें
जब कोई उपयोगकर्ता एक फॉर्म सबमिट करता है (सबमिट बटन क्लिक किया जाता है), तो फॉर्म की डिफ़ॉल्ट क्रिया फॉर्म के डेटा को एक यूआरएल में सबमिट करना है जो डेटा को संसाधित करता है।
प्रपत्र तत्वों में action . होता है और method विशेषताएँ जो फ़ॉर्म को सबमिट करने के लिए URL और अनुरोध के प्रकार को निर्दिष्ट करती हैं (get , post , और इसी तरह), क्रमशः।
यदि ये विशेषताएँ प्रदान नहीं की जाती हैं, तो डिफ़ॉल्ट URL वर्तमान URL है जिस पर फ़ॉर्म सबमिट किया गया था, और विधि get है ।
उदाहरण के लिए, यह कोड:
<form>
<input name="email" />
<input name="password" />
<input type="submit" />
</form>
यह पेज तैयार करता है:
इनपुट "dillion" और "password" के साथ फ़ॉर्म सबमिट करने पर, आप एक get . देख सकते हैं अनुरोध सबमिट किया गया 127.0.0.1:5500/index.html इस तरह:
यह क्रिया इस प्रकार है कि ब्राउज़र डिफ़ॉल्ट रूप से फ़ॉर्म को कैसे संभालते हैं।
लेकिन हो सकता है कि आप अनुरोध भेजने से पहले डेटा में और चीज़ें करना चाहें। प्रपत्रों को संभालने के आज के दृष्टिकोण में यह विशेष रूप से आम है।
यूआरएल को अनुरोध भेजने से पहले आप कुछ डेटा सत्यापन, डेटा जांच, प्रसंस्करण, हेडर कॉन्फ़िगर करना आदि करना चाह सकते हैं।
इन परिदृश्यों में, आप प्रपत्र की डिफ़ॉल्ट क्रिया को रोकना चाहेंगे। यहां बताया गया है:
<form id='form'>
...
</form>
const form = document.getElementById('form')
form.addEventListener('submit', (event) => {
event.preventDefault()
// process data and submit a request manually
})
इस तरह, फॉर्म जमा करना आपके हाथ में है।
लिंक पर क्लिक करते समय डिफ़ॉल्ट कार्रवाई को ओवरराइड कैसे करें
जब आप किसी लिंक पर क्लिक करते हैं (एक एंकर टैग a एक href . के साथ विशेषता), डिफ़ॉल्ट क्रिया ब्राउज़र पर क्लिक किए गए लिंक पर एक नेविगेशन है।
क्या होगा यदि आप उस क्रिया को रोकना चाहते हैं और शायद नेविगेशन से पहले कुछ करना चाहते हैं? उदाहरण के लिए, यह जांचना कि उपयोगकर्ता के पास उस पृष्ठ तक पहुंच है जिस पर वे नेविगेट करना चाहते हैं। यहां बताया गया है कि आप यह कैसे करेंगे:
<a id="link" href="https://google.com">Google</a>
const link = document.getElementById("link")
link.addEventListener("click", event => {
event.preventDefault()
// do something and navigate
})
आप इसका परीक्षण कर सकते हैं। जब आप "Google" लिंक पर क्लिक करते हैं, तो कोई नेविगेशन नहीं होता है - क्योंकि आपने डिफ़ॉल्ट नेविगेशन क्रिया को रोक दिया है। अब, आपको नेविगेशन को स्वयं संभालना होगा।
event.stopPropagation()
प्रचार कुछ फैलाने का कार्य है, इस मामले में, घटनाएं। stopPropagation किसी तत्व पर कोई ईवेंट ट्रिगर होने पर ईवेंट के प्रसार को रोकने के लिए विधि का उपयोग किया जाता है।
जावास्क्रिप्ट में, जब आप किसी तत्व पर एक घटना को ट्रिगर करते हैं, तो यह उस तत्व के माता-पिता और पूर्वजों के लिए पेड़ को बुदबुदाता है। मूल रूप से, घटना वाला तत्व माता-पिता के कंटेनर के अंदर "अंदर" होता है, इसलिए माता-पिता को भी ईवेंट प्राप्त होते हैं।
इसे बेहतर ढंग से समझाने के लिए, मैं एक उदाहरण का उपयोग करूँगा।
किसी एलीमेंट के चाइल्ड पर क्लिक करना
मान लें कि आपके पास निम्नलिखित तत्व हैं:
<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 कंटेनर भी क्लिक ईवेंट प्राप्त करता है, इसलिए क्लिक कॉलबैक फ़ंक्शन को भी कहा जाता है।
घटना प्रचार घटनाओं और तत्वों का डिफ़ॉल्ट व्यवहार है, लेकिन कुछ मामलों में, आप कुछ व्यवहार नहीं चाहते हैं। कई उदाहरणों में से एक यह है।
ये रहा जीमेल न्यू मैसेज पॉपअप:
सबसे ऊपर, आपके पास तीन एक्शन बटन हैं। कोई पॉपअप को छोटा करता है, कोई पॉपअप को पूर्णस्क्रीन बनाता है, और कोई पॉपअप बंद कर देता है।
लेकिन शीर्ष बार, "नया संदेश" टेक्स्ट के साथ, एक क्लिक हैंडलर भी है, ताकि जब इसे क्लिक किया जाए, तो यह पॉपअप को कम कर देता है:
एक बात जो आप यहां से बचना चाहते हैं, वह यह है कि, किसी भी बटन पर क्लिक करने पर, आप नहीं चाहते कि क्लिक इवेंट शीर्ष बार में प्रचारित हो और उस ईवेंट के लिए फ़ंक्शन को भी निष्पादित करें। मेरा मतलब यह है कि क्लोज बटन पर क्लिक करने पर, उदाहरण के लिए, आप नहीं चाहते कि टॉप बार भी छोटा हो।
इस तरह के मामलों में, आप प्रसार को रोकना चाहते हैं।
मान लें कि पॉपअप इस तरह बनाया गया है:
<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', () => {
// minimize or maximize popup
})
closeButton.addEventListener('click', () => {
// close popup
})
आप stopPropagation भी जोड़ना चाहेंगे घटना को शीर्ष बार में फैलाने से बचने के लिए, बटन के श्रोता के लिए विधि। ऐसा करने के लिए, आप बटन के श्रोता को इसमें अपडेट करेंगे:
closeButton.addEventListener('click', (event) => {
event.stopPropagation()
// close popup
})
इसके साथ, शीर्ष बार को केवल क्लिक ईवेंट प्राप्त होगा, जब उस पर सीधे क्लिक किया जाएगा।
रैपिंग अप
event.preventDefault() . के बीच का अंतर और event.stopPropagation() यह है कि पूर्व ब्राउज़र द्वारा की गई डिफ़ॉल्ट क्रियाओं को रोकता है, जबकि बाद वाला घटनाओं के डिफ़ॉल्ट व्यवहार को रोकता है-पेड़ को फैलाना।
ये डिफ़ॉल्ट क्रियाएं और व्यवहार गलतियां नहीं हैं, और कोड करते समय आपको इनके बारे में चिंता करने की आवश्यकता नहीं है। लेकिन ऐसे परिदृश्य हैं जहां आप उन्हें ओवरराइड करना चाहते हैं, जैसा कि हमने इस लेख के उदाहरणों में देखा है।