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


    } 
} 

我有一个元素，其中，我需要动态地添加点击事件，因为mousemoves将其移动到不同的位置 我的代码（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提升问题处理。您还需要向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); 

观测数据：也可能有在声明中错字：如果（e.pageY = 'someposition'），也许应该是：如果（e.pageY === 'someposition'）