javascript - js：function（）{}のremoveEventListener

Question

function foo（）{}のような名前付き関数を使用するのは簡単なようです-addEventListenerとremoveEventListenerを使用してください。

ただし、別のケースがあります。たとえば、名前のない関数を使用すると便利な場合があります。

addEventListener（

   "thervent",

   function(){

           /*whatever i want to do before removing the eventlistener afterwards.*/ 

           ...removeEvenetListener("...",???,...);

   }

）;

score 3 · Accepted Answer

関数を削除するときに参照できるように、関数を変数に格納する必要があります。

var handler;

handler = function () {
    /* ... */
    removeEventListener("theEvent", handler);
};

addEventListener("theEvent", handler);

必要に応じてこれを純粋にインラインで行うこともできますが、クロージャーを理解していない場合、これの表現は少し混乱します¹。このアプローチの利点は、ハンドラーの名前が、イベントリスナーを追加する関数のスコープを汚染しないことです。

addEventListener("theEvent", (function () {
    function handler () {
        /* ... */
        removeEventListener("theEvent", handler);
    };

    return handler;
}()));

¹もちろん、クロージャーを理解していない場合は、JavaScript の別の行を記述する前に、すぐにクロージャーについて学習する必要があります。これは、言語で最も便利で強力な機能の 1 つだからです。

score 3 · Accepted Answer

ブラウザの互換性の問題はさておき、^1,2その関数式に名前を付けるのを止めるものは何もありません:

addEventListener(
   "thervent",
   function foobar(){
        /*whatever i want to do before removing the eventlistener afterwards.*/ 

        removeEventListener("thervent", foobar ,...);

   }
);

score 0 · Accepted Answer

匿名関数を削除することはできません。削除するにはハンドラーが必要です。

el.addEventListener(
    "theevent",
   function myhandler(e){
       /*whatever i want to do before removing the eventlistener afterwards.*/ 
       this.removeEvenetListener(e.type, myhandler, false);

   },
   false
);

関数の本体に対してのみ定義されていることに注意してmyhandlerください。そのため、外部の他の関数の名前と衝突していません。

score -1 · Accepted Answer

を使用しarguments.calleeます。次のようなものが機能します。

addEventListener("theEvent",function() {
    var callee = arguments.callee;
    // some code here
    removeEventListener("theEvent",callee);
});

または、Strict Mode を使用する場合 (私の意見では意味がありませんが、念のため...)、これを使用します。

addEventListener("theEvent",function handler() {
    // some code here
    removeEventListener("theEvent",handler);
});

javascript - js：function（）{}のremoveEventListener

4 に答える 4

Related

Reference