web-dev-qa-db-ja.com

パラメーター付きの関数を使用してイベントリスナーを追加および削除するにはどうすればよいですか？

これが一般的な質問である場合は申し訳ありませんが、検索で適切であると思われる回答を見つけることができませんでした。

このようなイベントリスナーをアタッチすると：

_window.addEventListener('scroll', function() { check_pos(box); }, false);
_

次のように、後で削除しようとしても機能しないようです。

_window.removeEventListener('scroll', function() { check_pos(box); }, false);
_

これは、addEventListenerメソッドとremoveEventListenerメソッドが同じ関数への参照を必要としているのに対し、コードでは同一であるが文字通り同じではない匿名関数を提供しているためだと思います。

コードを変更してremoveEventListenerの呼び出しを機能させるにはどうすればよいですか？ 「ボックス」引数は、画面で追跡している_<iframe>_の名前を指します。つまり、私が持っている_<iframe>_ごとにscrollイベントを1回サブスクライブできるようにしたいと思います（数量は異なります）。そして、check_pos()関数が特定の別の関数を呼び出し、イベントリスナーを削除してシステムリソースを解放します。

私の直感は、ソリューションにはクロージャや匿名関数の名前付け、あるいはその両方が含まれるということですが、それがどのように見えるのか正確にはわかりません。具体的な例をいただければ幸いです。

それが理にかなっていると思います。

javascripteventsevent-handlingaddeventlistenerdom-events
27
Bungle

（あなたが提案したように）無名関数への参照を維持しようとしましたか？

そう：

var listener = function() {
  check_pos(box);
};

window.addEventListener('scroll', listener, false);
...
window.removeEventListener('scroll', listener, false);

Mozillaのドキュメント suggest 同じことです。

19
Vivin Paliath
var listener;

listener = function(){

if( window.target != anotherEvent.target )
{
    ...CODE where

    window.removeEventListener('click', listener , false);

};

window.addEventListener('click', listener ,false);
3
Rodrigo
_document.getElementById("yourId").removeEventListener("click",yourfunction1);
document.getElementById("yourId").addEventListener("click",yourfunction2);

function yourfunction1(){
//write code here
alert(1);
}

function yourfunction2(){
//write code here
alert(2);
}_
<button type="button" onclick="yourfunction1()" id="yourId">Button</button>
0
Bala visakh