Question

I have written the following function which adds an event listener and registers the event. Assume that this.$target holds the element id of the target element (for example: if we add event listener on div having id = 'myDiv', then this.$target will be myDiv) and this.$_ points to the target element (for example: this.$_=document.getElementById('myDiv'))

The event is registered in the following way…
There is an array for each type of event listeners for an element. For ex: myDiv_click will hold all click event listeners on div having id = myDiv...Slly myDiv_mouseover will hold all mouse over event handlers of the element..Corresponding to each event ,an event id is returned by the function. Which is in the form eventType_indexInTheArray.. For example: the first mouse click event on an element will have an event id click_0

This works fine…

Now I wrote a function for removing an eventlistener. The function takes the eventId returned by $hear() as argument… But after executing it the event is not deleted.. The function is given below.. What is the bug in it?

   main.prototype.$hear = function(ev,callbackF,order)
    {
            
            if(typeof order == 'undefined' || order =='' )
            order = 0;
            
            
            order = (order == 1)?true:false;
            var a;
            
            if(!(a = (this[this.$target+ev])))//event registration
            a = ((this[this.$target+ev]) = new Array());
            
            a.push(callbackF+"_"+order);
            this.$_.addEventListener(ev,callbackF,order);
            return ev+"_"+(a.length - 1);//event Id
    }


    main.prototype.$miss = function(evId)
      {
            var ev = evId.split("_");
            var evIndex = ev[1];
            ev = ev[0];
            evId = ev;
            if((!(ev = (this[this.$target+ev]))) || ev.length-1<evIndex||evIndex<0)
            {
                
                alert("ERROR \n\n\n Event having event id   "+evId+" is not registered\n");
                return false;
            }
            else
            {
                var temp = evIndex;
                evIndex = ev[evIndex].split("_") ;
                
                this.$_.removeEventListener(evId,evIndex[0],evIndex[1]);
                ev.splice(temp,1);
            }               
    }

Answer 1

You need to pass exactly the same arguments to removeEventListener like to EventListener. Thus adequate callbackF and order.

You are not doing so.

You probably meant

evIndex = a[evIndex].split("_");

instead of

evIndex = ev[evIndex].split("_");

and wanted a to be global.

But still the issue will be that you want get your original Function back from String.

You need to rethink and redesign your code.

Simply push:

{ 
   'event_name' : ev,
   'callback' : callbackF,
   'order' : order
}

into a instead of your concatenated string.