Adding and removing events in javascript

Question

I require to keep track on what events are on my dom elements and correspondingly add or remove event-listeners.

The way I keep track of the events right now is as follows ,

To add events :

function addListenerIfNone(addTo,eventType, func) {

    if(addTo.id){
        if (addedListeners[addTo.id+eventType]===eventType)
        {
            console.warn('event not added');
            return;

        }//event is alreaday present

        addedListeners[addTo.id+eventType]= eventType;

        addTo.addEventListener(eventType, func,true);
        console.warn('event added');


    }
    else{
        console.warn("Elements needs to have id attribute");
        return false;
    }
}

To remove added events:

function removeListenerIfPresent(addTo,eventType, func) {

    if(addTo.id){
        if (addedListeners[addTo.id+eventType]){ //event present
            addedListeners[addTo.id+eventType]= null;

            addTo.removeEventListener(eventType, func,true);
            console.warn("event  removed!");

        }
        else{
            console.warn("event not removed!");
            return false;
        }


    }
    else{
        console.warn("Elements needs to have id attribute");
        return false;


   }
}

I have a elements where I need to add click event dynamically as mousemoves overs it to different positions My code(psuedo):

addListenerIfNone(ele,'mousemove',moveAttackFromHex);

    var moveAttackFromHex=function(e){
    if (e.pageY='someposition')
       {
        x='some value';
       }
    else
       {
        x='some other value';
       }
   function moveUnitHandler(){
                        unitObj.moveToAttackUnit(hexMeshObj.selectedUnit,x);
                    };



  removeListenerIfPresent(ele,'click', moveUnitHandler);     //this doesn't remove the event ,even tho it is present and I end up having lot of click events


  addListenerIfNone(ele,'click', moveUnitHandler);//add new event listener once the previous is removed
    }

I can't keep removeEvent after add event as I it would remove the event right away,

I don't want to use jquery as I have not used it for the entire project but as I last resort I may end up using it.

note: the dom element already has a click event referencing another function,if this makes a difference but I think not..

Thanks

Answer 1

Your code like it is would have problems with the javascript hoisting process. You also need to pass to the removeEventListener function the same callback you registered with the addEventListener function and that it doesn't seem to happen in your code since a new instance of an inner function is created every time in pure javascript.

addedListeners = {};
function addListenerIfNone(addTo, eventType, func) {
    if(addTo.id) {
        if (addedListeners[addTo.id+eventType] === eventType)
        {
            console.warn('event not added');
            return;

        }//event is alreaday present

        addedListeners[addTo.id+eventType]= eventType;

        addTo.addEventListener(eventType, func, true);
        console.warn('event added');
    }
    else{
        console.warn("Elements needs to have id attribute");
        return false;
    }
}


function removeListenerIfPresent(addTo, eventType, func) {
    if(addTo.id){
        if (addedListeners[addTo.id+eventType]){ //event present
            addedListeners[addTo.id+eventType]= null;

            addTo.removeEventListener(eventType, func, true);
            console.warn("event  removed!");

        }
        else{
            console.warn("event not removed!");
            return false;
        }
    }
    else{
        console.warn("Elements needs to have id attribute");
        return false;
   }
}

function moveUnitHandler() {
    console.log("moveUnitHandler");
};

var moveAttackFromHex = function(e) {
    console.log(addedListeners);
    if (e.pageY = 'someposition') {
        console.log("if");
    }
    else {
        console.log("else");
    }

    removeListenerIfPresent(ele, 'click', moveUnitHandler);
    addListenerIfNone(ele, 'click', moveUnitHandler);
}

var ele = document.getElementById("ele");
addListenerIfNone(ele, 'mousemove', moveAttackFromHex);

Obs: you probably also have a typo in the statement: if (e.pageY = 'someposition'), maybe it should be: if (e.pageY === 'someposition')