पॉप क्विज़: addEventListener() को पास किए गए तीसरे पैरामीटर का मकसद क्या है?
अगर आपको लगता है कि addEventListener() में सिर्फ़ दो पैरामीटर इस्तेमाल किए जा सकते हैं या हमेशा false की वैल्यू को हार्डकोड किया जाता है, तो शर्मिंदा न हों. ऐसा हो सकता है कि आपको यह पता न हो कि इसका कोई संबंध… बबल से है?
ज़्यादा कॉन्फ़िगर किया जा सकने वाला addEventListener()
वेब के शुरुआती दिनों से, addEventListener() का तरीका काफ़ी बदल गया है. इसकी नई सुविधा, तीसरे पैरामीटर के बेहतर वर्शन के ज़रिए कॉन्फ़िगर की जाती है. तरीके की परिभाषा में हाल ही में किए गए बदलावों की मदद से, डेवलपर कॉन्फ़िगरेशन ऑब्जेक्ट के ज़रिए अतिरिक्त विकल्प दे सकते हैं. साथ ही, बूलियन पैरामीटर या कोई विकल्प तय न होने पर, वे पुराने वर्शन के साथ काम करने की सुविधा भी दे सकते हैं.
हमें यह बताते हुए खुशी हो रही है कि Chrome 55 में, उस कॉन्फ़िगरेशन ऑब्जेक्ट में once विकल्प के साथ-साथ passive (Chrome 51 में लागू किया गया) और capture विकल्प (Chrome 49 में लागू किया गया) भी काम करेंगे. उदाहरण के लिए:
element.addEventListener('click', myClickHandler, {
once: true,
passive: true,
capture: true
});
अपने इस्तेमाल के हिसाब से, इन विकल्पों को अलग-अलग तरीके से मिलाया जा सकता है.
खुद के बाद सफ़ाई करने के फ़ायदे
नए once विकल्प का इस्तेमाल करने का सिंटैक्स यही है, लेकिन इससे आपको क्या फ़ायदा मिलेगा? कम शब्दों में, यह आपको एक ऐसा इवेंट लिसनर देता है जो "एक बार इस्तेमाल करने के लिए" के हिसाब से बनाया गया है.
डिफ़ॉल्ट रूप से, इवेंट के सुनने वाले फ़ंक्शन को पहली बार कॉल करने के बाद, वह बना रहता है. ऐसा कुछ इवेंट के लिए ज़रूरी होता है. उदाहरण के लिए, ऐसे बटन जिन पर कई बार क्लिक किया जा सकता है. हालांकि, दूसरे कामों के लिए, इवेंट लिसनर को चालू रखने की ज़रूरत नहीं होती. अगर आपके पास ऐसा कॉलबैक है जिसे सिर्फ़ एक बार चलाया जाना चाहिए, तो इससे गड़बड़ी हो सकती है. अच्छी तरह से कोड लिखने वाले डेवलपर के पास, removeEventListener() का इस्तेमाल करके, कोड को साफ़ करने का विकल्प हमेशा होता है. इसके लिए, वे इन पैटर्न का इस्तेमाल करते हैं:
element.addEventListener('click', function cb(event) {
// ...one-time handling of the click event...
event.currentTarget.removeEventListener(event.type, cb);
});
नए once पैरामीटर का इस्तेमाल करने वाला कोड, पहले के मुकाबले बेहतर है. साथ ही, आपको इवेंट के नाम (पिछले उदाहरण में event.type) या कॉलबैक फ़ंक्शन (cb) के रेफ़रंस को ट्रैक करने की ज़रूरत नहीं पड़ती:
element.addEventListener('click', function(event) {
// ...one-time handling of the click event...
}, {once: true});
अपने इवेंट हैंडलर को साफ़ करने से, कॉलबैक फ़ंक्शन से जुड़े स्कोप को नष्ट करके, मेमोरी को बेहतर बनाया जा सकता है. इससे, उस स्कोप में कैप्चर किए गए किसी भी वैरिएबल को ग़ैर-ज़रूरी डेटा के तौर पर हटाया जा सकता है. यहां एक ऐसा उदाहरण दिया गया है जिसमें इस बात से फ़र्क़ पड़ेगा:
function setUpListeners() {
var data = ['one', 'two', '...etc.'];
window.addEventListener('load', function() {
doSomethingWithSomeData(data);
// data is now part of the callback's scope.
});
}
डिफ़ॉल्ट रूप से, load इवेंट लिसनर कॉलबैक, काम पूरा होने के बाद भी स्कोप में रहेगा. भले ही, इसका फिर कभी इस्तेमाल न किया जाए. data वैरिएबल का इस्तेमाल कॉलबैक में किया जाता है, इसलिए यह भी स्कोप में रहेगा और कभी भी ग़ैर-ज़रूरी डेटा इकट्ठा नहीं किया जाएगा. हालांकि, अगर once पैरामीटर की मदद से कॉलबैक हटा दिया गया है, तो फ़ंक्शन और उसके दायरे में मौजूद सभी चीज़ें, ग़ैर-ज़रूरी डेटा हटाने की प्रोसेस के तहत आ सकती हैं.
ब्राउज़र समर्थन
Chrome 55 और उसके बाद के वर्शन, Firefox 50 और उसके बाद के वर्शन, और Safari के टेक्नोलॉजी की झलक वाले 7 और उसके बाद के वर्शन में, once विकल्प के लिए नेटिव सहायता उपलब्ध है.
कई JavaScript यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी, इवेंट लिसनर बनाने के लिए आसान तरीके उपलब्ध कराती हैं. साथ ही, कुछ में एक बार होने वाले इवेंट तय करने के लिए शॉर्टकट होते हैं. इनमें से सबसे अहम jQuery का one() तरीका है. Andrea Giammarchi की dom4 लाइब्रेरी के हिस्से के तौर पर, एक पॉलीफ़िल भी उपलब्ध है.
धन्यवाद
इस पोस्ट में दिए गए सैंपल कोड के बारे में सुझाव/राय देने के लिए, Ingvar Stepanyan का धन्यवाद.