在 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;
 

   }
}

我有一个元素，我需要在鼠标移动到不同位置时动态添加点击事件我的代码（伪）：

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 元素已经有一个引用另一个函数的点击事件，如果这会有所不同，但我认为不会..

谢谢

Answer 1

你的代码在 javascript 提升过程中会有问题。您还需要将您在 addEventListener 函数中注册的相同回调传递给 removeEventListener 函数，并且它似乎不会在您的代码中发生，因为每次在纯 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')

在 javascript 中添加和删除事件

Adding and removing events in javascript

javascript

events

simple-html-dom

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