जावास्क्रिप्ट में इवेंटलिस्टनर हटाने का मुद्दा: क्यों रिमूवइवेंटलिस्टनर() विफल रहता है

जावास्क्रिप्ट में, इवेंट श्रोता डेवलपर्स को DOM तत्व इवेंट जैसे क्लिक, माउस मूवमेंट और बहुत कुछ की निगरानी करने में सक्षम बनाते हैं अधिक। हालांकि किसी ईवेंट श्रोता को संलग्न करना काफी सरल है, लेकिन इसे हटाना कभी-कभी चुनौतियों का सामना कर सकता है। ]

area.addEventListener('क्लिक', फ़ंक्शन(इवेंट) { ऐप.एडस्पॉट(इवेंट.क्लाइंटएक्स, इवेंट.क्लाइंटवाई); ऐप.एडफ़्लैग = 1; }, सत्य);

समस्या

बाद में कोड में ईवेंट श्रोता को हटाने का प्रयास करते समय समस्या उत्पन्न होती है।

area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

area.removeEventListener('click' , फ़ंक्शन(घटना) { ऐप.एडस्पॉट(इवेंट.क्लाइंटएक्स, इवेंट.क्लाइंटवाई); ऐप.एडफ़्लैग = 1; }, सत्य);

हालाँकि, ईवेंट श्रोता जुड़ा रहता है, जिससे उसका निष्कासन रोका जा सकता है। प्रत्येक भिन्न फ़ंक्शन इंस्टेंस एक अलग ईवेंट श्रोता बनाता है। इस मामले में, श्रोता को जोड़ने और हटाने के लिए दो अनाम फ़ंक्शन का उपयोग किया जाता है।

समस्या को हल करने के लिए, सुनिश्चित करें कि हटाने के लिए उपयोग किया जाने वाला फ़ंक्शन संदर्भ श्रोता को जोड़ने के लिए उपयोग किए गए फ़ंक्शन संदर्भ के समान है।

area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

फ़ंक्शन हैंडलक्लिकलिस्टनर(इवेंट) { ऐप.एडस्पॉट(इवेंट.क्लाइंटएक्स, इवेंट.क्लाइंटवाई); ऐप.एडफ़्लैग = 1; } // इवेंट श्रोता जोड़ें क्षेत्र.addEventListener('क्लिक', हैंडलक्लिकलिस्टनर, सत्य); // इवेंट श्रोता को हटा दें क्षेत्र.removeEventListener('क्लिक', HandleClickListener, true);

दोनों ऑपरेशनों के लिए समान फ़ंक्शन संदर्भ का उपयोग करके, जावास्क्रिप्ट कॉल किए जाने पर इवेंट श्रोता को सही ढंग से हटा सकता है।