इवेंट लिसनर

जेफ़ पॉस्निक
जेफ़ पॉस्निक

पॉप क्विज़: addEventListener() को भेजे गए तीसरे पैरामीटर का मकसद क्या है?

अगर आपको लगता है कि addEventListener() ने सिर्फ़ दो पैरामीटर लिए हैं, या हो सकता है कि हमेशा false की वैल्यू को हार्डकोड किया हो, तो परेशान न हों. साथ ही, आपको यह भी समझने में परेशानी न हो कि बबल्स से जुड़ी कुछ जानकारी है?

ज़्यादा कॉन्फ़िगर किया जा सकने वाला addEventListener()

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

हमें यह बताते हुए खुशी हो रही है कि Chrome 55, passive (Chrome 51 में लागू किया गया) और capture विकल्पों (Chrome 49 में लागू) के साथ, उस कॉन्फ़िगरेशन ऑब्जेक्ट में once विकल्प के लिए सहायता जोड़ता है. उदाहरण के लिए:

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() तरीका. एक पॉलीफ़िल भी उपलब्ध है, जो एंड्रिया जियामार्ची की dom4 लाइब्रेरी के हिस्से के तौर पर है.

धन्यवाद

इस पोस्ट में सैंपल कोड के बारे में सुझाव, राय देने या शिकायत करने के लिए, Ingvar Stepanyan का धन्यवाद.