जावास्क्रिप्ट - एरो फ़ंक्शन और इवेंट हैंडलर

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

ईवेंट.लक्ष्य संपत्ति सीधे उस तत्व को संदर्भित करती है घटना को ट्रिगर किया. ज्यादातर मामलों में, यह वह तत्व है जिसे क्लिक किया गया था, उस पर मँडराया गया था, या फोकस प्राप्त किया गया था। यह वह तत्व है जिस पर ईवेंट को निष्पादन के समय संसाधित किया जा रहा है। इसके बजाय .currentTarget. यहां कोड का एक संशोधित संस्करण है:

dom.videoLinks.click((e) => { e.preventDefault(); कंसोल.लॉग($(e.currentTarget)); var self = $(e.currentTarget), url = self.attr(configuration.attribute); इवेंटहैंडलर.शोवीडियो(यूआरएल); // किसी भी सक्रिय वीडियो थंब को निष्क्रिय करें dom.videoLinks.filter('.video-selected').removeClass('video-selected'); // चयनित वीडियो अंगूठे को सक्रिय करें self.addClass('वीडियो-चयनित'); });

.currentTarget बनाम .target

सामान्य तौर पर, इवेंट हैंडलर के साथ काम करते समय इवेंट.करंटटार्गेट का उपयोग इवेंट.टारगेट पर किया जाना चाहिए। ऐसा इसलिए है क्योंकि ईवेंट DOM ट्री को बबल अप या कैप्चर कर सकते हैं, और ईवेंट.लक्ष्य का उपयोग हमेशा उस तत्व को संदर्भित नहीं कर सकता है जिसे आप लक्षित करना चाहते हैं।

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