ändert Verweis auf bestehendes Ereignisse

Question

Ich habe den folgenden JavaScript-Code:

var MyGlobalRef = (function() { 

    function init(obj1, obj2) { 

     prepareEvents(obj1); 
     prepareEvents(obj2); 

     function prepareEvents(obj) { 

      var handleMouseUp = function (evt) { 
       // do work with obj 
      }; 

      obj.addEventListener('mouseup', handleMouseUp); 
     } 
    } 
    return { 
     init: init 
    } 
})(); 

In meiner Haupt-Seite, ich bin die init Funktion wie diese häufig Aufruf:

function moveNext(){ 
    MyGlobalRef.init(getNewObj1(), getNewObj2()); 
} 

Mein Problem ist, dass auf die Funktion moveNext() tendiere ich dazu, die vorhandenen Objekte zu ersetzen, was bedeutet, dass es immer nur 2 Objekte auf der Seite gibt. Je mehr ich jedoch moveNext rufe, desto mehr Event-Listener werden generiert. Also, wenn ich 3 mal moveNext 3 Mal, das Mouse-up-Ereignis dreimal pro Maus feuert. Die offensichtliche Lösung besteht darin, nur das erste Mal addEventListener anzurufen. Das Problem dabei ist jedoch, dass obj (das im Mouse-up-Ereignis verwendet wird) nicht aktualisiert wird und immer noch auf das Original obj verweist. Außerdem habe ich removeEventListener nicht verwendet, weil ich keinen Verweis auf obj habe, sobald es initiiert wird.

Answer 1

Um auf meinen Kommentar zu erweitern. Hier ist, was ich mir vorstelle. Sie gelangen wieder eine destroy Funktion als Folge der init Ausführung

Lösung # 1

var MyGlobalRef = (function() { 

    function init(obj1, obj2) { 

     prepareEvents(obj1); 
     prepareEvents(obj2); 

     function prepareEvents(obj) { 

      var handleMouseUp = function (evt) { 
       // do work with obj 
      }; 

      obj.addEventListener('mouseup', handleMouseUp); 
     } 

     return function() { 
      obj1.removeEventListener('mouseup'); 
      obj2.removeEventListener('mouseup'); 
     }; 
    } 
    return { 
     init: init 
    } 
})(); 


// cleanup is a variable stored in your code to run a cleanup on obj1 and obj2 later on 

function moveNext(){ 
    if (cleanup) { 
     cleanup(); 
    } 

    cleanup = MyGlobalRef.init(GetNewObj1A(), GetNewObj1A()); 
} 

Lösung # 2 Bezug auf obj1 und obj2 in Verschluss halten.

var MyGlobalRef = (function() { 

    var _obj1; 
    var _obj2; 

    function init(obj1, obj2) { 

     prepareEvents(obj1); 
     prepareEvents(obj2); 

     function prepareEvents(obj) { 

      var handleMouseUp = function (evt) { 
       // do work with obj 
      }; 

      obj.addEventListener('mouseup', handleMouseUp); 
     } 

     _obj1 = obj1; 
     _obj2 = obj2; 
    } 
    function cleanup() { 
     if (_obj1) { 
      _obj1.removeEventListener('mouseup'); 
     } 

     if (_obj2) { 
      _obj2.removeEventListener('mouseup'); 
     } 
    } 
    return { 
     init: init, 
     cleanup: cleanup 
    } 
})(); 



function moveNext(){ 
    MyGlobalRef.cleanup(); 
    MyGlobalRef.init(GetNewObj1A(), GetNewObj1A()); 
} 

Answer 2

Sie rufen prepareEvents vor der Funktion auf, setzen Sie die Funktion prepareEvents (obj) vor Ihrer init-Funktion. Versuch es.