1. ホーム
  2. javascript

[解決済み] JavaScriptの無名関数のremoveEventListener

2022-02-05 03:59:40

質問

あるオブジェクトがあり、その中にメソッドがあります。これらのメソッドは、無名関数の内部でオブジェクトに入れられます。以下のような感じです。

var t = {};
window.document.addEventListener("keydown", function(e) {
    t.scroll = function(x, y) {
        window.scrollBy(x, y);
    };
    t.scrollTo = function(x, y) {
        window.scrollTo(x, y);
    };
});  

(もっとたくさんのコードがありますが、問題を示すにはこれで十分です)

さて、場合によってはイベントリスナーを停止させたいと思います。そのため、removeEventListenerを行おうとしているのですが、その方法がわかりません。他の質問で、匿名関数でremoveEventListenerを呼び出すことはできないと読みましたが、この状況でもそうなのでしょうか?

無名関数内に作成したtのメソッドがあるため、可能だと思いました。このような感じです。

t.disable = function() {
    window.document.removeEventListener("keydown", this, false);
}

なぜ、こんなことができないのか?

他に(良い)方法はないのでしょうか?

ボーナス情報として、これはSafariでのみ動作する必要があり、それゆえIEのサポートはありません。

解決するには?

無名関数のポイントは、名前と参照する方法がないことだと思います。

私だったら、名前を付けた関数を作るか、変数に入れるかして、参照を持つようにします。

var t = {};
var handler = function(e) {
    t.scroll = function(x, y) {
        window.scrollBy(x, y);
    };
    t.scrollTo = function(x, y) {
        window.scrollTo(x, y);
    };
};
window.document.addEventListener("keydown", handler);

そして、それを削除するには

window.document.removeEventListener("keydown", handler);