अनाम फ़ंक्शन के साथ addEventListener को हटाने के लिए कैसे करें?

Question 1

function doSomethingWith(param)
{
    document.body.addEventListener(
        'scroll',
        function()
        {
            document.write(param);
        },
        false
    ); // An event that I want to remove later
}
setTimeout(
    function()
    {
        document.body.removeEventListener('scroll', HANDLER ,false);
            // What HANDLER should I specify to remove the anonymous handler above?
    },
    3000
);
doSomethingWith('Test. ');

Question 2

आप नहीं कर सकते। आपको किसी नामित फ़ंक्शन का उपयोग करना होगा या किसी भी तरह से संदर्भ को संग्रहीत करना होगा।

var handler;

function doSomethingWith(param) {
    handler = function(){
        document.write(param);
    };  
    document.body.addEventListener('scroll', handler,false);
}
setTimeout(function() {
     document.body.removeEventListener('scroll', handler ,false);
}, 3000);

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

अपडेट करें:

आप अपना स्वयं का हैंडलर बना सकते हैं (:)):

var Handler = (function(){
    var i = 1,
        listeners = {};

    return {
        addListener: function(element, event, handler, capture) {
            element.addEventListener(event, handler, capture);
            listeners[i] = {element: element, 
                             event: event, 
                             handler: handler, 
                             capture: capture};
            return i++;
        },
        removeListener: function(id) {
            if(id in listeners) {
                var h = listeners[id];
                h.element.removeEventListener(h.event, h.handler, h.capture);
                delete listeners[id];
            }
        }
    };
}());

तब आप इसका उपयोग कर सकते हैं:

function doSomethingWith(param) {
    return Handler.addListener(document.body, 'scroll', function() {
        document.write(param);
    }, false);
}

var handler = doSomethingWith('Test. ');

setTimeout(function() {
     Handler.removeListener(handler);
}, 3000);

डेमो

Question 3

आप फ़ंक्शन के संदर्भ की आवश्यकता नहीं कर सकते:

function doSomethingWith(param) {
   var fn = function(){ document.write(param); };
   document.body.addEventListener('scroll', fn, false);
   setTimeout(function(){ document.body.removeEventListener('scroll', fn, false); }, 3000);
}
doSomethingWith('Test. ');

Question 4

आप ऐसा भी कर सकते हैं:

const ownAddEventListener = (scope, type, handler, capture) => {
  scope.addEventListener(type, handler, capture);
  return () => {
    scope.removeEventListener(type, handler, capture);    
  }
}

तब आप इस तरह से ईवेंट श्रोता को हटा सकते हैं:

// Add event listener
const disposer = ownAddEventListener(document.body, 'scroll', () => { 
  // do something
}, false);

// Remove event listener
disposer();

Question 5

यदि आपको IE का समर्थन नहीं करना है, तो आप एक बार विकल्प का उपयोग कर सकते हैं

[Element].addEventListener('click', () => {...}, {
  capture: false,
  once: true
});