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