नामस्थान वैनिला जावास्क्रिप्ट घटनाएं जैसे jQuery

Question

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

उदाहरण:

$(window).on('scroll.myScrollNamespace, function() ...

मैं सोच रहा हूँ कि कैसे मैं सादे जावास्क्रिप्ट में एक नाम स्थान बना सकते हैं। यह स्पष्ट रूप से काम नहीं होगा:

window.addEventListener('resize.myScrollNamespace', function() ...

Answer 1

तो एक गुमनाम समारोह के बजाय:

window.addEventListener('resize', function myScroll() {...}); 

तो आप उपयोग करने में सक्षम हो सकता है:

window.addEventListener('resize', function() {...}); 

आप एक नामित समारोह का उपयोग करें:

window.removeEventListener('resize', myScroll); 

सुनिश्चित करें कि आपके पास दायरे में myScroll है। जब आप एक अलग जगह में श्रोताओं को दूर से उन्हें जोड़ने पर हो सकता है आप कुछ बाहरी दायरे में अपने कार्यों को परिभाषित और उनके नाम में removeEventListener के रूप में एक ही तरीके से addEventListener में उपयोग करना चाहिए: के लिए

function myScroll() { 
    // ... 
} 

window.addEventListener('resize', myScroll); 

window.removeEventListener('resize', myScroll); 

यदि आप चाहते हैं कई श्रोताओं को एक बार में हटाने में सक्षम हो, तो आपको उन्हें कुछ सरणी में स्टोर करना होगा और इसके प्रत्येक तत्व के लिए RemoveEventListener को कॉल करना होगा।

EventTarget.removeEventListener() दस्तावेज़ीकरण देखें।

Answer 2

@rsp उत्तर सही हैंडलर को अनबाइंड करने की समस्या को सही ढंग से हल करता है, यह वास्तव में नामस्थान की समस्या का उत्तर नहीं देता है। इस संभाल करने के लिए आप इस तरह थोड़ा और कोडिंग करने की ज़रूरत होगी:

function on(elm, evtName, handler) { 
    evtName.split('.').reduce(function(evtPart, evt) { 
    evt = evt ? evt +'.'+ evtPart : evtPart; 
    elm.addEventListener(evt, handler, true); 
    return evt; 
    }, ''); 
} 

function off(elm, evtName, handler) { 
    evtName.split('.').reduce(function(evtPart, evt) { 
    evt = evt ? evt +'.'+ evtPart : evtPart; 
    elm.removeEventListener(evt, handler, true); 
    return evt; 
    }, ''); 
} 

// Your handler 
function onScroll(e) { ... } 

// To bind it 
on(window, 'scroll.myScrollNamespace', onScroll); 

// To unbind it 
off(window, 'scroll.myScrollNamespace', onScroll); 

तो योग करने के लिए: यह वास्तव में कई घटना श्रोताओं सेट - अपने नेमस्पेसिंग के प्रत्येक भाग के लिए एक। दुर्भाग्यवश यह कार्यक्षमता मूल रूप से समर्थित नहीं है, लेकिन जैसा कि आप देख सकते हैं इसे अपेक्षाकृत सरल प्राप्त किया जा सकता है। बस सावधान रहें कि भले ही यह स्क्रिप्ट गहरी नेमस्पेसिंग का समर्थन करे (उदाहरण के लिए scroll.parent.child) यह कई घटना श्रोताओं (इस मामले में 3) को बांध देगा, और इस प्रकार यह अव्यवस्थित है।

आप संभवतः यह अधिक प्रदर्शन कर सकते हैं, लेकिन यह ऐसा हो जाता है।