在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事件，我的代碼（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
    }

添加事件后，我無法保留removeEvent，因為它會立即刪除事件，

我不想使用jquery，因為我沒有在整個項目中使用它，但是作為最后的選擇，我最終可能會使用它。

注意：dom元素已經具有引用另一個函數的click事件，如果這有所作為，但我認為沒有。

謝謝

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'）