JavaScript で独自のイベント ハンドラー内からイベント リスナーを削除するにはどうすればよいですか?

イベント ハンドラー内のイベント リスナーの削除

独自の定義内からイベント リスナーを削除するソリューションを探しています。ただし、JavaScript のイベント処理メカニズムにより、これは直接実行可能ではありません。

1 つのアプローチは、名前付き関数を使用することです。名前付き関数を作成し、それをイベント ハンドラーとして使用すると、後でその関数名を参照してイベント リスナーを削除できます。同時に、click 変数はイベント ハンドラーの外側で宣言して、その増分を容易にする必要があります。

var click_count = 0;

function myClick(event) {
    click_count++;
    if(click_count == 50) {
       canvas.removeEventListener('click', myClick);
    }
}

canvas.addEventListener('click', myClick);

あるいは、クロージャを利用して click_count 変数をカプセル化する関数を作成することもできます。このアプローチにより、複数の要素にわたってカウンターをインクリメントできます。

var myClick = (function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
})( 0 );

canvas.addEventListener('click', myClick);

最後に、各要素に独自のカウンターを持たせたい場合は、初期クリック数のパラメーターを受け入れる匿名関数の採用を検討してください。

var myClick = function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
};

canvas.addEventListener('click', myClick( 0 ));

以上がJavaScript で独自のイベント ハンドラー内からイベント リスナーを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。