匿名関数として渡されたイベントリスナーを削除するにはどうすればよいですか？

Question

オブジェクトにイベントリスナーを追加するときに、関数に引数を渡す必要があります。したがって、el.addEventListener("click", (evt) => { someFunc(arg) })のようにそれをラップする必要があります。しかし、私はこのイベントリスナーを後で私のプロジェクトで削除することができません。参照されている関数が匿名関数である場合、どのようにイベントリスナーを削除しますか？

Answer 1

removeEventListenerを使用してください。このには、あなたの関数についての参照を保持するが必要です。

var func = (evt) => { someFunc(arg) }; 
el.addEventListener("click", func); 
el.removeEventListener("click", func) 

Answer 2

あなたが後でイベントの複数のタイプで、プロジェクト全体でそれを使用するために、removeEventListenerを使用して、addOneTimeEventListener関数を作成することができます

function addOneTimeEventListener(node, type, callback) { 
    node.addEventListener(type, function(evt) { 
     evt.target.removeEventListener(evt.type, arguments.callee); 
     return callback(evt); 
    }); 
} 

そして、それを使うより：

addOneTimeEventListener(el, 'click', evt => someFunc(arg)); 

ワーキングデモ：

var addOneTimeEventListener = function(node, type, callback) { 
 
     node.addEventListener(type, function(evt) { 
 
     evt.target.removeEventListener(evt.type, arguments.callee); 
 
     return callback(evt); 
 
     }); 
 
    }, 
 
    el = document.getElementById('paragraph'); 
 

 
addOneTimeEventListener(el, 'click', evt => console.log('Clicked once!'));

<p id="paragraph">Some text example...</p>