जावास्क्रिप्ट इवेंट डेलिगेशन का उपयोग कैसे और क्यों करें

जानें कि जावास्क्रिप्ट में इवेंट डेलिगेशन पद्धति का क्या, क्यों और कैसे उपयोग करना है।

JavaScript Event Delegation क्या है और आपको इसका उपयोग कब करना चाहिए?

संक्षेप में, ईवेंट प्रतिनिधिमंडल एक जावास्क्रिप्ट विधि है जो आपको केवल एकल का उपयोग करके बाल तत्वों के साथ बातचीत करने की अनुमति देती है। घटना श्रोता, मूल तत्व पर। ईवेंट प्रतिनिधिमंडल के साथ, आप प्रत्येक बच्चे के तत्व में ईवेंट हैंडलर जोड़ने से बच सकते हैं, लेकिन आप अभी भी उन्हें ढूंढ और उनमें हेरफेर कर सकते हैं।

आप देखेंगे कि यह एक पल में शक्तिशाली क्यों है।

मान लें कि आपके पास सूची के अंदर वस्तुओं की एक सूची है। जब उपयोगकर्ता किसी भी सूची आइटम पर क्लिक करता है, तो आप चाहते हैं कि कुछ हो।

आइए ऐसा करने के दो अलग-अलग तरीकों की जाँच करें।

ईवेंट श्रोताओं को प्रत्येक तत्व से जोड़ें

सूची में अलग-अलग तत्व वस्तुओं तक पहुंच प्राप्त करने का एक आम तरीका उनके माध्यम से लूप करना है उदा। for . के साथ कुंडली। और फिर घटना श्रोताओं को प्रत्येक तत्व में संलग्न करें:

let allExerciseItems = document.querySelectorAll(".exercise-item")

for (let exerciseItem of allExerciseItems) {
 exerciseItem.addEventListener("click", function(event) {
  // Do something with target child element
  event.target.classList.toggle("exercise-complete")
 });
}

उदाहरण

https://codepen.io/StrengthandFreedom/pen/KBZezV/

ईवेंट प्रतिनिधिमंडल के साथ एक्सेस आइटम

इवेंट प्रतिनिधिमंडल आपके द्वारा ऊपर देखे गए लूप उदाहरण से बिल्कुल अलग है। हम जिस तत्व तक पहुंच चाहते हैं, उसके माध्यम से पुनरावृति (लूपिंग) के बजाय, हम केवल मूल तत्व को इस तरह लक्षित करते हैं:

// Get parent element, add a click event listener
document.querySelector(".exercise-list").addEventListener("click", function(event) {
  if(event.target.classList.contains('exercise-item')) {
  // Do something with target child element
  event.target.classList.toggle('exercise-complete')
  }
})

कोडपेन उदाहरण। नोट:के बजाय classList.contains आप Element.matches API का उपयोग कर सकते हैं matches() यदि आपको अधिक चयनकर्ता लचीलेपन की आवश्यकता है।

जैसा कि आप देख सकते हैं, परिणाम बिल्कुल वैसा ही है। जब आप इस पर व्यायाम तत्व आइटम पर क्लिक करते हैं, तो वे exercise-complete . को टॉगल करते हैं कक्षा। इस परिणाम को प्राप्त करने के लिए हमने जो तरीका अपनाया वह अलग है।

तो आपको लूप विधि के लिए ईवेंट हैंडलिंग + के बजाय ईवेंट डेलिगेशन विधि का उपयोग क्यों करना चाहिए?

आइए इसके बारे में आगे चर्चा करें!

ईवेंट प्रतिनिधिमंडल और प्रदर्शन

कल्पना करें कि आप एक वेब एप्लिकेशन के साथ काम कर रहे हैं जहां आपके पास प्रतिदिन, घंटे या मिनट में सैकड़ों या हजारों गतिशील रूप से बनाए गए तत्व हैं। एक उदाहरण होटल आरक्षण के लिए बुकिंग कैलेंडर हो सकता है। या ट्विटर जैसा सोशल मीडिया प्लेटफॉर्म जिसे इष्टतम उपयोगकर्ता अनुभव देने के लिए लगातार लाइव अपडेट की आवश्यकता होती है।

यदि आपके वेब UI के प्रत्येक तत्व में ईवेंट श्रोता जुड़े हुए हैं, तो इस प्रकार का परिदृश्य शीघ्र ही हार्डवेयर गहन हो सकता है।

वे सभी ईवेंट श्रोता आपके उपयोगकर्ता CPU को हॉग कर सकते हैं। वे स्मृति में बैठे फ़ंक्शन संदर्भों की एक बड़ी मात्रा का कारण बन सकते हैं। यह स्मृति रिसाव और सामान्य प्रदर्शन में गिरावट का कारण बन सकता है।

मैं जीसी (कचरा संग्रह) के बारे में ज्यादा नहीं जानता। मेरे पास कमोबेश पूरी तरह से जावास्क्रिप्ट (एक उच्च-स्तरीय प्रोग्रामिंग भाषा) लिखने की विलासिता है। लेकिन एक बात जो मुझे पता है, वह यह है कि ब्राउज़र में जीसी कई अलग-अलग विक्रेता ब्राउज़र (क्रोम, फ़ायरफ़ॉक्स इत्यादि) के कारण अप्रत्याशित हो सकता है। और, ज़ाहिर है, अनगिनत डिवाइस (स्मार्टफ़ोन, लैपटॉप आदि)।

कचरा संग्रह

संक्षेप में, कचरा संग्रह एक प्रकार का कंप्यूटर मेमोरी प्रबंधन है। एक कचरा संग्रहकर्ता पुराने/अप्रयुक्त कोड को हटाने का प्रयास करता है जो बस वहीं बैठता है और आपके कंप्यूटर की मेमोरी को देखता है। विभिन्न प्रोग्रामिंग भाषाओं और प्रणालियों के लिए अनगिनत अलग-अलग कचरा संग्रहकर्ता हैं।

ईवेंट श्रोताओं को हर चीज़ से जोड़ने के लिए, जैसा कि आपने लूप उदाहरण में देखा था, आपके वेब ऐप के लिए आवश्यक कचरा संग्रहण की मात्रा में वृद्धि होगी। यह लगभग हमेशा प्रदर्शन को कम करेगा।

जब आपके पास एकल . होता है तो यह आमतौर पर अधिक प्रदर्शनकारी होता है एक पैरेंट एलिमेंट पर इवेंट श्रोता जो अपने चाइल्ड एलिमेंट पर होने वाले सभी क्लिक को सुनता है, न कि इवेंट श्रोताओं को हर एक चाइल्ड एलिमेंट से जोड़ता है।