インライン匿名関数を使用する場合のイベントリスナーの削除

Question

単純なゲームアプリケーションでは、匿名のイベントコールバック関数にいくつかの引数を渡そうとしています。私はそれがコンテキストに合っている（そのスコープは引数を識別する）ので、匿名関数を使用してのみ行うことができます。問題は、ゲームに再起動するオプションがあることです。再起動すると、同じノードに新しいイベントリスナーが追加されます。古いイベントを推測すると、リスナーがまだ存在しているため、不適切な機能とオーバーロードされたアプリケーションが発生します。私が考えることができる解決策は、新しいものを追加する前に古いeventListenersを削除することによって "リフレッシュ"することです。しかし、イベントコールバック関数が匿名であると考えると、私は何の方法も見つけられませんでした。

代替ソリューションは何ですか？

var adder = function(colorBox, num){ 
    colorBox.addEventListener('click', function(){ 
     eventCall(this, num); 
    }); 
} 

var eventCall = function(t, num){ 
     var clickedBox = t.style.backgroundColor; 
.... 

Answer 1

この関数はどこかに保存することができます。そのため、後で関数を参照することができます。 配列を使用して、それらを加算器機能にはいくつかの呼び出しによって上書きされることなく、複数のイベントハンドラを保存し、それらのすべてなどを削除する機能を持っている、のようなものができます：あなたは、すべてのイベントを削除することができます

function eventCall(t, num) { 
    var clickedBox = t.style.backgroundColor; 
} 

var fns = []; 

function adder(colorBox, num) { 
    function fn() { 
    eventCall(this, num); 
    } 

    colorBox.addEventListener('click', fn); 

    fns.push(fn); 
} 

function remover(colorBox) { 
    fns.forEach(function(fn) { 
    colorBox.removeEventListener('click', fn); 
    }); 
} 

Answer 2

あなたはoff機能（http://api.jquery.com/off/）を使用してjQueryを介して、あなたのイベントハンドラを削除することができます。たとえば、

$("p").off(); 

は、すべての段落からすべてのイベントハンドラを削除します。したがって、すべてのdom要素を特定のクラスで分類すると、それでも可能です。

Answer 3

要素のリスナーをouterHTMLプロパティを使用して呼び出します。それ自体にouterHTMLプロパティを設定

colorBox.outerHTML = colorBox.outerHTML; 

が接続されているすべてのイベントリスナーを削除し、あなたが添付したい任意の新しいリスナーに新鮮な開始することができます。この方法で

詳しい情報はここで見つけることができます：

https://stackoverflow.com/a/32809957/5463636