在javascript中添加和删除事件

Question

我需要跟踪我的dom元素上的事件，并相应地添加或删除事件监听器。

我现在跟踪事件的方式如下，

添加活动：

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;


   }
}

我有一个元素，我需要动态添加click事件，因为mousemoves将它移到不同的位置 我的代码（伪）：

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
    }

我添加事件后无法保留removeEvent，因为它会立即删除事件，

我不想使用jquery，因为我没有将它用于整个项目，但是我最后可能会使用它。

注意：dom元素已经有一个引用另一个函数的click事件，如果这有所不同但我认为不是..

由于

Answer 1

您的代码就像javascript提升过程一样存在问题。您还需要向removeEventListener函数传递与addEventListener函数注册的相同的回调，并且它似乎不会在您的代码中发生，因为每次在纯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：你可能在声明中也有一个拼写错误：if（e.pageY ='someposition'），也许它应该是：if（e.pageY ==='someposition'）