removeEventListener not removing an event listener

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.

Answer 2

It looks like evIndex[0] is a string which you're sending to removeEventListener instead of a reference to the function you want to remove.

I think you need something like this:

this.$_.removeEventListener(evId,callbackF,evIndex[1]);

I realise that the string evIndex[0] contains the name of the function, but removeEventListener needs an actual reference to it, not just its name in a string.

Answer 3

function scaleTwo(influenceEvent){
    var slideshow=document.getElementById("step3");         
    if(influenceEvent){
        if (slideshow.attachEvent){     
            slideshow.attachEvent("on"+mousewheelevt, rotateimage)
        } else if (slideshow.addEventListener) {
            slideshow.addEventListener(mousewheelevt, rotateimage, false)
        }
    } else{
        if (slideshow.attachEvent) {
            slideshow.detachEvent("on"+mousewheelevt, rotateimage);
        } else if (slideshow.addEventListener) {
            slideshow.removeEventListener(mousewheelevt, rotateimage, false);
        }   
    }                           
}

var influenceEvent = 0;

$(window).scroll(function(event){

    if (($(document).scrollTop() > $('#step1').height()*2) && $(document).scrollTop() < $('#step1').height()*3) {

        if(flagScrollTwo) {
            scaleTwo(1);
            influenceEvent = 1;
        }
        flagScrollTwo = 0;                              
    }

    if (($(document).scrollTop() > $('#step1').height()*3) || $(document).scrollTop() < $('#step1').height()*2) {

        if(influenceEvent){
            scaleTwo(0);
           influenceEvent = 0;
        } 
    }
}