JavaScript में इवेंट डेलिगेशन मेथड का क्या, क्यों और कैसे उपयोग करें, सीखें।
JavaScript इवेंट डेलिगेशन क्या है और आपको इसका उपयोग कब करना चाहिए?
संक्षेप में, इवेंट डेलिगेशन एक JavaScript मेथड है जो आपको चाइल्ड एलिमेंट्स के साथ इंटरैक्ट करने की अनुमति देता है, पैरेंट एलिमेंट पर केवल एक सिंगल इवेंट लिसनर का उपयोग करके। इवेंट डेलिगेशन के साथ, आप हर चाइल्ड एलिमेंट में इवेंट हैंडलर्स जोड़ने से बच सकते हैं, लेकिन फिर भी उन्हें ढूंढ और मैनिपुलेट कर सकते हैं।
आप देखेंगे कि यह एक पल में शक्तिशाली क्यों है।
मान लीजिए आपके पास एक सूची के अंदर आइटम्स की सूची है। जब यूज़र किसी भी सूची आइटम पर क्लिक करता है, तो आप कुछ होने देना चाहते हैं।
आइए ऐसा करने के दो अलग-अलग तरीके देखते हैं।
प्रत्येक एलिमेंट में इवेंट लिसनर्स अटैच करें
सूची पर व्यक्तिगत एलिमेंट आइटम्स तक पहुंच प्राप्त करने का एक सामान्य तरीका है उन्हें लूप करना, जैसे for लूप के साथ। और फिर प्रत्येक एलिमेंट में इवेंट लिसनर्स अटैच करना:
let allExerciseItems = document.querySelectorAll(".exercise-item") for (let exerciseItem of allExerciseItems) { exerciseItem.addEventListener("click", function(event) { // टार्गेट चाइल्ड एलिमेंट के साथ कुछ करें event.target.classList.toggle("exercise-complete") }); }उदाहरण
https://codepen.io/StrengthandFreedom/pen/KBZezV/
इवेंट डेलिगेशन से आइटम्स एक्सेस करें
इवेंट डेलिगेशन ऊपर देखे गए for लूप उदाहरण से पूरी तरह अलग है। प्रत्येक एलिमेंट के माध्यम से इटरेट (लूप) करने के बजाय जिसे हम एक्सेस करना चाहते हैं, हम बस पैरेंट एलिमेंट को टार्गेट करते हैं, जैसे:
// पैरेंट एलिमेंट प्राप्त करें, क्लिक इवेंट लिसनर जोड़ें document.querySelector(".exercise-list").addEventListener("click", function(event) { if(event.target.classList.contains('exercise-item')) { // टार्गेट चाइल्ड एलिमेंट के साथ कुछ करें event.target.classList.toggle('exercise-complete') } })CodePen उदाहरण। नोट: classList.contains के बजाय आप एलिमेंट.matches API matches() का उपयोग कर सकते हैं यदि आपको अधिक सेलेक्टर लचीलापन चाहिए।
जैसा कि आप देख सकते हैं, परिणाम बिल्कुल वही है। जब आप इस पर किसी भी अभ्यास एलिमेंट आइटम पर क्लिक करते हैं, तो वे exercise-complete क्लास को टॉगल करते हैं। जो अलग है वह है इस परिणाम को प्राप्त करने के लिए हमारे द्वारा उपयोग की गई मेथड।
तो आपको इवेंट हैंडलिंग + for लूप मेथड के बजाय इवेंट डेलिगेशन मेथड का उपयोग क्यों करना चाहिए?
आइए आगे इस पर चर्चा करें!
इवेंट डेलिगेशन और परफॉरमेंस
कल्पना करें कि आप एक वेब एप्लिकेशन से निपट रहे हैं जहां आपके पास प्रति दिन, घंटे, या यहां तक कि मिनट में सैकड़ों या हजारों डायनामिकली बनाए गए एलिमेंट्स हैं। एक उदाहरण होटल रिजर्वेशन के लिए बुकिंग कैलेंडर हो सकता है। या ट्विटर जैसा सोशल मीडिया प्लेटफॉर्म जिसे इष्टतम यूज़र अनुभव प्रदान करने के लिए लगातार लाइव अपडेट की आवश्यकता होती है।
यदि आपके वेब UI में हर एलिमेंट में इवेंट लिसनर्स अटैच हैं, तो इस प्रकार का परिदृश्य जल्दी से हार्डवेयर इंटेंसिव बन सकता है।
वे सभी इवेंट लिसनर्स आपके यूज़र्स के CPU को हॉग कर सकते हैं। वे मेमोरी में बैठे फ़ंक्शन रेफरेंसेस की एक बड़ी मात्रा पैदा कर सकते हैं। इससे मेमोरी लीक और सामान्य परफॉरमेंस गिरावट हो सकती है।
मुझे GC (गार्बेज कलेक्शन) के बारे में ज्यादा जानकारी नहीं है। मुझे अधिकांशतः JavaScript (एक हाई-लेवल प्रोग्रामिंग लैंग्वेज) लिखने का सौभाग्य मिला है। लेकिन एक चीज जो मुझे पता है, वह यह है कि ब्राउज़र में GC कई अलग-अलग वेंडर ब्राउज़र्स (Chrome, FireFox आदि) के कारण अप्रत्याशित हो सकता है। और, निश्चित रूप से, अनगिनत डिवाइसेस (स्मार्टफोन्स, लैपटॉप्स आदि)।
गार्बेज कलेक्शन
संक्षेप में, गार्बेज कलेक्शन एक प्रकार का कंप्यूटर मेमोरी मैनेजमेंट है। एक गार्बेज कलेक्टर पुराने/अनुपयोगी कोड को हटाने की कोशिश करता है जो बस वहां बैठा होता है और आपके कंप्यूटर की मेमोरी को क्लॉग करता है। विभिन्न प्रोग्रामिंग लैंग्वेज और सिस्टम के लिए अनगिनत अलग-अलग गार्बेज कलेक्टर्स हैं।
हर चीज में इवेंट लिसनर्स अटैच होने से, जैसा कि आपने लूप उदाहरण में देखा, आपकी वेब ऐप को जितनी गार्बेज कलेक्शन की आवश्यकता होगी, वह बढ़ जाएगी। यह लगभग हमेशा परफॉरमेंस को कम करेगा।
जब आपके पास पैरेंट एलिमेंट पर एक सिंगल इवेंट लिसनर होता है जो अपने सभी चाइल्ड एलिमेंट्स पर क्लिक के लिए सुनता है, तो यह आमतौर पर हर एक चाइल्ड एलिमेंट में इवेंट लिसनर्स अटैच करने की तुलना में अधिक परफॉर्मेंट होता है।
