重複イベントリスナーの削除

Question

私はイベントリスナーを削除する方法を見つけようとしています。ボタンにイベントリスナーを追加する関数を作ったが、関数が再び実行されると、イベントリスナーを削除してもう一度追加したい。しかし代わりに別のイベントリスナーを追加するだけで、ボタンをクリックするとイベントリスナー関数が2回実行されます。または、ボタンに2番目のイベントリスナーを追加しないようにすることもできます。ここで

は、任意のヒントは、最も参考になるコード

<button id="myId">My Button</button> 
 
    
 
    
 
    
 
<script> 
 
    
 
    
 
    
 
myFunction() 
 
myFunction() 
 
    
 
function myFunction() { 
 
    var el = document.getElementById('myId') 
 
    
 
    var listenerFn = function() { 
 
      console.log('My Message') 
 
    } 
 
    
 
    el.removeEventListener('click', listenerFn) 
 
    
 
    el.addEventListener('click', listenerFn) 
 
} 
 
    
 
    
 
    
 
</script>

です。

UPDATE：

@FathiAlqa​​dasiの答えは私の問題のためにこれまでの最高です。しかし、私はより多くのコードを表示する必要があります。リスナー関数は動的であり、リスナー関数の機能はさまざまです。ここに私が意味するものの別の例があります。

<button id="myId">My Button</button> 



<script> 

myFunctionA() 
myFunctionA() 



function myFunctionA() { 
    var el = document.getElementById('myId') 
    myFunctionB() 
    function myFunctionB() { 
     if (el.innerHTML === 'My Button') { 
      var listenerFn = function() { 
       console.log('My Message 1') 
      } 

       el.removeEventListener('click', listenerFn); 

      el.addEventListener('click', listenerFn); 
     } 

     else { 
      var listenerFn = function() { 
       console.log('My Message 2') 
      } 

       el.removeEventListener('click', listenerFn); 

      el.addEventListener('click', listenerFn); 
     } 
    } 
} 
</script> 

UPDATE 2：

コードの@ありがとうございます。ここで

<button id="myId">My Button</button> 

<script> 
    var listenerFn; 
    myFunction(); 
    myFunction() 
    function myFunction() { 
     var el = document.getElementById('myId') 
     el.removeEventListener('click', listenerFn); 
     listenerFn = function() { 
      console.log('My Message') 
     } 
     el.addEventListener('click', listenerFn, false); 
    } 
</script> 

Answer 1

<button id="myId">My Button</button> 



    <script> 

    myFunction() 
    myFunction() 
    function listenerFn() { 
      console.log('My Message') 
     } 
    function myFunction() { 
     var el = document.getElementById('myId') 

     el.removeEventListener('click', listenerFn) 

     el.addEventListener('click', listenerFn) 
    } 
    </script> 

Answer 2

イベントリスナーでの作業、私は登録されているものを追跡できるように、オブジェクトに保存し、簡単に、必要に応じてそれらを削除したいきちんとcodeboxのコードがあります。

あなたのケースでは、リスナーを削除する必要があるかどうかを確認するために、グローバルスコープ内に単純なブール値が作成されます。 （リスナーを追加した後にtrueに設定されます）。あなたの更新を1として

<button id="myId">My Button</button> 



<script> 

var removeListener = false; 

myFunction() 
myFunction() 

function myFunction() { 
    var el = document.getElementById('myId') 

    var listenerFn = function() { 
      console.log('My Message') 
    } 

    if (removeListener) el.removeEventListener('click', listenerFn) 

    el.addEventListener('click', listenerFn); 
    removeListener = true; 
} 



</script> 

UPDATE 、私が改訂された答えを持っています。その関数を2回呼び出すのはなぜ私にはまだ分かりませんが、それを与えられたものとして取り上げます。

<button id="myId">My Button</button> 



<script> 
var listeners = {}; 

myFunctionA(); 
myFunctionA(); 



function myFunctionA() { 
    var listenerFn1 = function() { //These functions need to be distinct so that we can refer to them when removing 
     console.log('My Message 1') 
    }; 

    var listenerFn2 = function() { //We actually didn't need to move these out from where they were, but its a little easier to read this way 
     console.log('My Message 2') 
    }; 

    function myFunctionB() { 
     if (el.innerHTML === 'My Button') { 
      if (listeners[el]) el.removeEventListener('click', listeners[el]); 
      el.addEventListener('click', listenerFn1); 
      listeners[el] = listenerFn1; //This could be expanded to account for different events, but keeping it simple for this scenario 
     } 
     else { 
      if (listeners[el]) el.removeEventListener('click', listeners[el]); 
      el.addEventListener('click', listenerFn2); 
      listeners[el] = listenerFn2; 
     } 
    } 

    var el = document.getElementById('myId'); 
    myFunctionB(); 
} 
</script> 

ここで重要な点は、イベントがトリガされたときに呼び出される関数を格納するオブジェクトを持つことです。オブジェクトは、例えば、さまざまなイベントのために可能性があります：あなたは、あなたが同じ機能を追加しないことを確認するよう、匿名関数を使用することはできません複数のイベントがリスナーに取り付けることができるようにしたい場合は

var listener = {}; 
var el = document.getElementById('myId'); 

... 

//Check if a click listener exists for el 
if (listener[el] && listener[el].click) { 
    //Remove currently registered listener 
    el.removeEventListener('click', listener[el].click); 
} 
listener[el] = listener[el] || {}; //If listener[el] does not exist, create it 
listener[el].click = function() { 
    //We can use an anonymous function in this case because we do not need to compare it to any other functions 
    console.log('Click 1'); 
}; 
el.addEventListener('click', listener[el].click); 

二度。

var listener = {}; 
var el = document.getElementById('myId'); 

... 

var eventHandler1 = function() { 
    console.log('eventHandler1'); 
}; 
var eventHandler2 = function() { 
    console.log('eventHandler2'); 
}; 
//Check if a click listener exists for el that uses eventHandler1 
if (listener[el] && listener[el].click && listener[el].click.includes(eventHandler1)) { 
    //Remove listener with eventHandler1 
    el.removeEventListener('click', listener[el].click.filter(function(val) { 
    return val === eventHandler1; 
    })); 
} 
listener[el] = listener[el] || {}; //If listener[el] does not exist, create it 
listener[el].click = listener[el].click || []; 
listener[el].click.push(eventHandler1); 
el.addEventListener('click', eventHandler1); 

Answer 3

JSでは、関数は参照型であることを意味するオブジェクト型です。私はあなたが1回あなたが走っていることを意味しますmyFunction;

function myFunction() { 
    var el   = document.getElementById('myId'), 
     listenerFn = function() { 
         console.log('My Message') 
         }; 

    el.removeEventListener('click', listenerFn) 
    el.addEventListener('click', listenerFn) 
} 

あなたはremoveEventListener()の引数が予め設定されたイベントリスナー関数を参照しなければならないので、それゆえremoveEventLister()はそれらを離れて言うことができる別のlistenerFnを作成します。

次のようにする必要があります。

<button id="myId">My Button</button> 
 

 
<script> 
 

 
function listenerFn() { 
 
    console.log('My Message') 
 
} 
 

 
function myFunction() { 
 
    var el = document.getElementById('myId') 
 
    el.removeEventListener('click', listenerFn) 
 
    el.addEventListener('click', listenerFn) 
 
} 
 

 
myFunction(); 
 

 
</script>